nebular
nebular copied to clipboard
akveo
Support for Angular 16
Issue type
I'm submitting a ...
- [ ] bug report
- [x] feature request
Issue description
Current behavior:
Nebular 11 does not support Angular 16, it expects Angular 15 as a dependency. When used with Angular 16, npm complains about unresolved dependencies.
Expected behavior:
Nebular should work out of the box with Angular 16.
Steps to reproduce:
Basically follow the installation instructions of Nebular: https://akveo.github.io/nebular/docs/guides/install-nebular#install-nebular
npm install -g @angular/cli@16
ng new --defaults angular-nebular-test
cd angular-nebular-test
ng add @nebular/theme
ℹ Using package manager: npm
⚠ Unable to find compatible package. Using 'latest' tag.
⚠ Package has unmet peer dependencies. Adding the package may not succeed.
The package @nebular/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
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 @nebular/[email protected]
npm ERR! node_modules/@nebular/theme
npm ERR! @nebular/theme@"11.0.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.
Other information:
npm, node, OS, Browser
Node v16.15.1
npm: 8.11.0
Angular, Nebular
Angular: 16.0.0
Nebular: 11.0.0
Hello, just now I found this bookstore, I find it very good. I am using angular 16, and when I try to install it, it says that it is not compatible. Please correct this dependency error... and please make it also compatible with standalone components
Work Around - For New Projects
Assuming you're ok with stepping down to Angular CLI version 15.2.8 for the project
If you're here from the Fireship Angular tutorial project, this is particularly for you!
You can create a new angular project that uses Angular15 by using the following command:
ng new <your-project-name> --version=15
and then in the new project directory you can run the add command as directed by the Nebular Installation guide.
PS C:...\your-project-name> ng add @nebular/theme
@AstroClef but the current version is angular 16, why do I have to downgrade from 16 to 15? The correct solution for me is to support the current version of Angular
@matiasAS I understand the frustration. If you're stuck on 16 then I'm sorry that workaround doesn't work for you. (Updating comment headline to include "New Projects" for clarity)
I wrote it to help anyone with a new project; particularly those following the Fireship tutorial and find themselves here: "Angular for Beginners - Let's build a Tic-Tac-Toe PWA"
@matiasAS Sorry, I don't know. I'm not a contributor to Nebular. I actually came from that tutorial!
I tried to do the neccessary changes to update to Angular 16 in the nebular source code. Seems to work fine, but I am not able to commit my changes without linter errors. The linting for the project does not seem to be set up properly. So for now I commited my changes with the --no-verify flag and created pull request #3193.
Hi, I am also looking for angular 16 support. I have a complex project and we have already migrated to v16, but nebular is blocking us in linting and other tasks due to unsupported v16.
BTW, we have migrated to v16 using npm install --force that allowed us to use v16 and compile the project successfully.
I see there is already a pull request submitted for it. can anyone review and do the needful please.
I tried to do the neccessary changes to update to Angular 16 in the nebular source code. Seems to work fine, but I am not able to commit my changes without linter errors. The linting for the project does not seem to be set up properly. So for now I commited my changes with the
--no-verifyflag and created pull request #3193.
I did a PR for the same thing before I saw your PR or issue, with a linting fix and other things you can look at #3194,
However, I do not see any response to either my PR or yours, and I have a feeling that Nebular has died and that all projects built on it will perish🤦♂️😩.
Therefore, if anyone from the Nebular team is listening to us, I hope that they clarify what we are about to reach here because many projects trusted you and they will not be happy to lose that trust forever.
Since the release of angular 17 is near and nebular is still missing angular 16 support. I think it's time to search for some alternatives. Any ideas? (I don't like the Angular Material layout)
@kisimediaDE I use tailwind css ui library like preline if you are concerned about layout.
You can also used primeflex and primeng its a very good combination
Nebular is usually quite behind the current Angular versions.
The workaround without having to use npm install -f is to define the peerDependencies of the Nebular package(s) using the overrides section of your packages.json. For example, for @nebular/security:
{
"dependencies": {
"@angular/common": "^16.2.6",
"@angular/core": "^16.2.6",
"@angular/router": "^16.2.6",
"@nebular/security": "^11.0.1"
}
"overrides": {
"@nebular/security": {
"@angular/common": "$@angular/common",
"@angular/core": "$@angular/core",
"@angular/router": "$@angular/router"
}
}
}
I have this same issue now with Angular 17. Just sharing. Maybe the log exceptions of my builds can help you figure out what this sticky error is about:
Error: Error: node_modules/@nebular/theme/components/cdk/table/row.d.ts:39:5 - error TS2610: 'sticky' is defined as an accessor in class 'CdkFooterRowDef', but is overridden here in 'NbFooterRowDefDirective' as an instance property.
39 sticky: boolean;
~~~~~~
https://github.com/jesperancinha/image-train-filters-web/actions/runs/8646406604/job/23705673823?pr=1612
