ngx-datatable
ngx-datatable copied to clipboard
swimlane
Update dependencies to support Angular 13
I'm submitting a ... (check one with "x")
[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter
Current behavior
Create an Angular 13 project with the Angular CLI, then run
npm install @swimlane/ngx-datatable
I see something like this:
C:\Projects\lw\task-manager>npm install --save-dev @swimlane/ngx-datatable
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR! rxjs@"~7.4.0" from the root project
npm ERR! peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.0.0" from the root project
npm ERR! peer @angular/common@">=11.0.2" from @swimlane/[email protected]
npm ERR! node_modules/@swimlane/ngx-datatable
npm ERR! dev @swimlane/ngx-datatable@"*" from the root project
npm ERR! 1 more (@angular/platform-browser)
npm ERR! 1 more (@angular/core)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.6.3" from @swimlane/[email protected]
npm ERR! node_modules/@swimlane/ngx-datatable
npm ERR! dev @swimlane/ngx-datatable@"*" 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.
npm ERR!
npm ERR! See C:\Users\jhouser\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jhouser\AppData\Local\npm-cache\_logs\2021-11-08T00_20_48_320Z-debug.log
Expected behavior
Library should install into an Angular 13 project without issue.
Reproduction of the problem
Get this directory: https://github.com/Reboog711/LearnWith/tree/master/chapter2/angular13App_Bootstrap
Run
npm install
And then run
npm install @swimlane/ngx-datatable
What is the motivation / use case for changing the behavior?
Support the latest version
Please tell us about your environment:
If I run ng --version I get this:
Angular CLI: 13.0.1 Node: 16.13.0 Package Manager: npm 8.1.3 OS: win32 x64
Angular: 13.0.0 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1300.1 @angular-devkit/build-angular 13.0.1 @angular-devkit/core 13.0.1 @angular-devkit/schematics 13.0.1 @angular/cli 13.0.1 @schematics/angular 13.0.1 rxjs 7.4.0 typescript 4.4.4
- Table version:
I am trying to install the latest
- Angular version:
13.0.1
- Browser:
N/A since this is a npm install issue.
- Language: [all | TypeScript X.X | ES6/7 | ES5]
N/A since this is a npm install issue.
Update:
While I was able to force the install to install the lib, I was not able to run the app after doing so:
The console error in text form in case anyone searches for it:
C:\Projects\lw\task-manager>ng serve
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.49 MB
styles.css, styles.js | styles | 416.45 kB
polyfills.js | polyfills | 339.13 kB
main.js | main | 33.42 kB
runtime.js | runtime | 6.86 kB
| Initial Total | 3.27 MB
Build at: 2021-11-08T00:50:05.100Z - Hash: c79b8590e8120afb - Time: 3617ms
./src/app/app.module.ts:13:0-86 - Error: Module not found: Error: Can't resolve '@swimlane/ngx-datatable/lib/ngx-datatable.module' in 'C:\Projects\lw\task-manager\src\app'
./src/app/app.module.ts:13:0-86 - Error: Module not found: Error: Can't resolve '@swimlane/ngx-datatable/lib/ngx-datatable.module' in 'C:\Projects\lw\task-manager\src\app'
Error: node_modules/@swimlane/ngx-datatable/lib/ngx-datatable.module.d.ts:2:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (@swimlane/ngx-datatable/lib/ngx-datatable.module) which declares NgxDatatableModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
2 export declare class NgxDatatableModule {
~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
@ricardochl I forked the project and am looking into; but no solutions yet. I'm playing around w/ it in my spare time. I was probably gonna remove some of the tslint libs.
If I upgraded a project that already had this component installed it seems to work w/o issue, but I only did a quick test on that. My problem is installing it on a brand new project.
@Reboog711 I have same problem, only in a new project. When I updated another project it's work.
I yesterday send a PR #2045
@ricardochl What I ended up with was almost identical to your PR. I dropped out a few of the tslint extensions, since they were having depenency install issues and upgraded nonde-sass for my current of Node. Thanks for submitting that.
I have it built locally, and I think I did so correctly, but the build instructions seem out of date, for example there is no npm run release.
I used npm link to link my local A13 build to my brand new Angular 13 project. It compiles without issue, however I'm getting a runtime error:
core.mjs:6495 ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
at injectInjectorOnly (core.mjs:4768)
at ɵɵinject (core.mjs:4778)
at Module.ɵɵdirectiveInject (core.mjs:14717)
at NodeInjectorFactory.DatatableComponent_Factory [as factory] (datatable.component.ts:59)
at getNodeInjectable (core.mjs:3556)
at instantiateAllDirectives (core.mjs:10293)
at createDirectivesInstances (core.mjs:9642)
at Module.ɵɵelementStart (core.mjs:14840)
at TaskGridComponent_Template (task-grid.component.html:5)
at executeTemplate (core.mjs:9613)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.mjs:25840)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
at invokeTask (zone.js:491)
at ZoneTask.invoke (zone.js:476)
or
I am at a bit of a loss.
The solution to my problem above was to set preserveSymLinks to true in the project's Angular.json [not the lib]:
https://stackoverflow.com/a/54647323/133840
project.projectName.architect.build.options:
"options": {
"outputPath": "dist/task-manager",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/@swimlane/ngx-datatable/themes/bootstrap.css"
],
"scripts": [],
"preserveSymlinks": true // <--- this is what I had to add
},
Any updates on this issue? When can we expect this framework to fully support Angular 13?
I'd like to hear about updates here, too. Getting these important updates so late is a pain. @Reboog711 Did you get things to work finally with ngx-datatable and angular 13?
@SimplyComple0x78 I built it locally and used a linked lib. That solved my short term problem, but not the long term problem of being able to build and deploy in an automated fashion using npm.
I try at home and works as expected. Install and running was successfu
l
Just install it, restart ng -s npm i @swimlane/ngx-datatable --save --force
I've submitted this PR #2108, hopefully that will unblock us to move forward with Angular 13 + Ivy.
