Not work in Angular16 - Githubissues

KhaledAyash-1978 commented 1 year ago

Before opening an issue, please search for duplicates (opened and closed) https://github.com/valor-software/ngx-bootstrap/issues There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

Bug description:

Plunker/StackBlitz that reproduces the issue:

Using Plunkr, StackBlitz is the best way to show your issue. Issues without link to an example of reproduction might be closed.

You can use one of starter templates:

Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview

StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap:

Angular:

Bootstrap:

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

A clear and concise description of what you expected to happen.

nagkumar commented 1 year ago

Workspace extension with invalid name (defaultProject) found.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-cofee-shop@0.0.10
npm ERR! Found: @angular/animations@16.0.0
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~16.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^15.0.0" from ngx-bootstrap@10.3.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!   ngx-bootstrap@"^10.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

pl. upgrade this

prasadkolasani commented 1 year ago

Please upgrade to be compatible with Angular 16

[INFO] npm http fetch GET 200 https://registry.npmjs.org/ngx-bootstrap 145ms (cache revalidated) [INFO] npm timing idealTree Completed in 18736ms [INFO] npm timing command:install Completed in 18747ms [INFO] npm ERR! code ERESOLVE [INFO] npm ERR! ERESOLVE unable to resolve dependency tree [INFO] npm ERR! [INFO] npm ERR! While resolving: holdings-maintenance-ui@0.0.0 [INFO] npm ERR! Found: @angular/animations@16.0.0 [INFO] npm ERR! node_modules/@angular/animations [INFO] npm ERR! @angular/animations@"~16.0.0" from the root project [INFO] npm ERR! [INFO] npm ERR! Could not resolve dependency: [INFO] npm ERR! peer @angular/animations@"^15.0.0" from ngx-bootstrap@10.3.0 [INFO] npm ERR! node_modules/ngx-bootstrap [INFO] npm ERR! ngx-bootstrap@"^10.3.0" from the root project [INFO] npm ERR! [INFO] npm ERR! Fix the upstream dependency conflict, or retry [INFO] npm ERR! this command with --force, or --legacy-peer-deps [INFO] npm ERR! to accept an incorrect (and potentially broken) dependency resolution. [INFO] npm ERR! [INFO] npm ERR! See C:\Users\a660284\AppData\Local\npm-cache\eresolve-report.txt for a full report. [INFO] npm timing npm Completed in 25380ms

inorganik commented 1 year ago

The solution is there in your npm logs - since they haven't updated peer dependencies to use v16 yet, you must install like this:

npm install ngx-bootstrap --legacy-peer-deps

And it works fine.

nagkumar commented 1 year ago

As I am upgrading the app to CORE Angular 16.. hence this dependency is to be upgraded to Angular 16.x

inorganik commented 1 year ago

The main thing with angular 16 is that it drops support for ngcc compiled libs, but ngx-bootstrap uses ivy. I agree this lib should be updated to support v16 but it's not correct to say this doesn't work with v16.

nagkumar commented 1 year ago

not correct to say this doesn't work with v16.

Agreed, I tried our code with

npm install --legacy-peer-deps

this leads success of npm install but fails `npm start errors

angular-coffee-shop>npm start

angular-cofee-shop@0.0.10 start ng serve --configuration dev

Workspace extension with invalid name (defaultProject) found. An unhandled exception occurred: Cannot find module 'typescript' Require stack:

G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@ngtools\webpack\src\ivy\plugin.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@ngtools\webpack\src\ivy\index.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@ngtools\webpack\src\index.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular-devkit\build-angular\src\webpack\configs\common.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular-devkit\build-angular\src\webpack\configs\index.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular-devkit\build-angular\src\builders\dev-server\webpack-server.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular-devkit\build-angular\src\builders\dev-server\builder.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular-devkit\build-angular\src\builders\dev-server\index.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular\cli\src\command-builder\architect-base-command-module.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular\cli\src\command-builder\architect-command-module.js
G:\DWork\osource\experiments\fe\angular\angular-coffee-shop\node_modules\@angular\cli\src\commands\serve\cli.js
angular-coffee-shop\node_modules\@angular\cli\src\commands\command-config.js
angular-coffee-shop\node_modules\@angular\cli\src\command-builder\command-runner.js
angular-coffee-shop\node_modules\@angular\cli\lib\cli\index.js
angular-coffee-shop\node_modules\@angular\cli\lib\init.js See "C:\Users\RAJANA~1\AppData\Local\Temp\ng-OVGQGD\angular-errors.log" for further details.

though typescript is installed globally

StefanNedelchev commented 1 year ago

In theory it should work without issues if you force the update. But I agree that the dependencies of the project should be updated in a new major version in order to avoid this error.

moniuch commented 1 year ago

Not every project might be comfortable adding --legacy-peer-deps to their CD/CI scripts.

tasdpp commented 1 year ago

Any idea of a possible date when an update will be released to resolve this? I really like this code but if this is going to happen each time a Angular update comes out then I need to start looking to an alternative. Thank for all that you do contributors!

kevinlinar commented 1 year ago

Are they not planning to solve this? :(

lahode commented 1 year ago

ngx-bootstrap is a core module for many projects if you don't use angular material in your project. I can't believe after 6 weeks Angular 16 is out, no proposal was made for updating dependencies. Is this library still maintained?

reda-alaoui commented 1 year ago

@lahode I can't believe people still don't understand how OSS work. Why don't you create a pull request?

moniuch commented 1 year ago

@reda-alaoui Please don't shame people for that they don't come up with a PR, but rather try to understand their frustration by not being able to update their frameworks and leverage new features, only because they had chosen to trust a specific OSS library at some point. And when you read @lahode post, there is nothing there to jump the gun or take offense about.

After all, would that make sense if N disappointed users came up with N PRs?

StefanNedelchev commented 1 year ago

There seems to be a PR from a month ago #6582 but I don't see progress on it

StefanNedelchev commented 1 year ago

@reda-alaoui Please don't shame people for that they don't come up with a PR, but rather try to understand their frustration by not being able to update their frameworks and leverage new features, only because they had chosen to trust a specific OSS library at some point. And when you read @lahode post, there is nothing there to jump the gun or take offense about.

After all, would that make sense if N disappointed users came up with N PRs?

I understand your frustration but in overall he is right. By using an open-source project you accept all the risks that come with it. Authors of open-source project might even totally abandon and ruin them (like the case with faker and colors), or their author can get into jail for certain period of time (the case with core.js) and you can do nothing about it. It is what it is, life can be unfair 😆

moniuch commented 1 year ago

@StefanNedelchev It is impossible to forget about that risk - as with every major Angular update, I am constantly reminded of it by one package or another. All I wanted to convey is that shaming people for that fact they don't come up with a solution is just - what was the word? - unfair.

reda-alaoui commented 1 year ago

You must be either patient or use the workaround or fix it yourself or pay for support. Otherwise, you shouldn't use OSS.

Also, it's not crazy to expect from an Angular developper, who can't believe after 6 weeks Angular 16 is out, to fix the issue himself for his own Angular application. Aren't we all Angular developpers here? If you think it's shaming, well you must be very fragile.

moniuch commented 1 year ago

@reda-alaoui Yes, I think so, and yes I have the right to be fragile. And I'm also glad some of your attitude has spoken up here. Take care.

ZacHadd commented 1 year ago

Like the comments above, please upgrade to be compatible with Angular v16

nagkumar prasadkolasani

guillermodelagala commented 1 year ago

+1. Is there anyone who has an alternative?

sliceofbytes commented 1 year ago

I haven't had any time to really test it out, but here is a build of this PR (unchanged)

https://file.io/T9PIiXb1ypP6

Could really use an update so we can pull from npm, I tried to update it with an alternative npm link, but was not having much luck, and I don't have much more time today. Might just rip out this package and replace it.

https://github.com/sliceofbytes/ngx-bootstrap

Swanzor commented 1 year ago

Would love to see progress on the pull request. However, for the rest of us that is pressured for time I see 2 alternatives:

1) Try and migrate to an alternative OR 2) Swap from NPM to PNPM and set it so it is more chilled with the dependencies

I opted for the 2nd option because migrating code is a pain, but swapping package managers is easy.

For those who want to go this route:

So to make it work first change your package manager to PNPM (lookup a migration guide)
Then create a .npmrc file in your project root with the following content:
```
strict-peer-dependencies=false
auto-install-peers=true
```
Run pnpm install and you are set.

I can confirm this works and that v10.3.0 works in Angular v16 as we have been running production sites for weeks with that setup with no problems. This is only a suggestion, but legitimately the only reason the error is being thrown in the first place is is because of NPM. PNPM solves that elegantly. You could run NPM's --legacy-peer-deps flag but causes more issues than it solves. So I would suggest this.

valor-software / ngx-bootstrap

Not work in Angular16 #6579