Update dependencies to support Angular 13

Reboog711 commented 2 years ago

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: task-manager@0.0.0
npm ERR! Found: rxjs@7.4.0
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/common@13.0.0
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/ngx-datatable@20.0.0
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/ngx-datatable@20.0.0
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.

Reboog711 commented 2 years ago

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 commented 2 years ago

Any solutions for this?

Reboog711 commented 2 years ago

@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.

ricardochl commented 2 years ago

@Reboog711 I have same problem, only in a new project. When I updated another project it's work.

I yesterday send a PR #2045

Reboog711 commented 2 years ago

@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.

Reboog711 commented 2 years ago

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
          },

parksmart-dev commented 2 years ago

+1 for this.

krusche commented 2 years ago

Any updates on this issue? When can we expect this framework to fully support Angular 13?

SimplyComple0x78 commented 2 years ago

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?

Reboog711 commented 2 years ago

@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.