"ng add ng2-charts" installs ng2-charts@0.0.0 which is incompatible with schematics (Angular 18)

[rklec]

STR

I follow the installation guide which states to run this:

$ ng add ng2-charts
√ Determining Package Manager
  › Using package manager: npm
√ Searching for compatible package version
  › Found compatible package version: ng2-charts@0.0.0.
√ Loading package information from registry
√ Confirming installation
√ Installing package
Package "ng2-charts" was found but does not support schematics.

What happens

Apparently, this installs v0.0.0 of the package?

What should happen

Find up-to-date version and use/install it.

System

dependencies:

 "dependencies": {
    "@angular/animations": "18.2.13",
    "@angular/cdk": "18.2.14",
    "@angular/common": "18.2.13",
    "@angular/compiler": "18.2.13",
    "@angular/core": "18.2.13",
    "@angular/forms": "18.2.13",
    "@angular/platform-browser": "18.2.13",
    "@angular/platform-browser-dynamic": "18.2.13",
    "@angular/router": "18.2.13",
    // *snip*
    "devextreme": "24.1.4",
    "devextreme-angular": "24.1.4",
    "devextreme-schematics": "1.7.0",
    "ngx-mf": "4.1.1",
    "rxjs": "7.8.1",
    "tslib": "2.3.0",
    "zone.js": "0.14.10",
    // *snip*
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "18.2.12",
    "@angular-eslint/builder": "18.4.3",
    "@angular-eslint/eslint-plugin": "18.4.3",
    "@angular-eslint/eslint-plugin-template": "18.4.3",
    "@angular-eslint/schematics": "18.4.3",
    "@angular-eslint/template-parser": "18.4.3",
    "@angular/cli": "18.2.12",
    "@angular/compiler-cli": "18.2.13",
    "@angular/language-service": "18.2.13",
    // *snip*
    "@types/file-saver": "2.0.5",
    "@types/jasmine": "~4.3.5",
    "@types/jasminewd2": "~2.0.10",
    "@types/jsoneditor": "9.9.5",
    "@types/leaflet": "1.9.3",
    "@types/lodash": "4.14.196",
    "@types/luxon": "3.3.1",
    "@types/node": "20.14.11",
    "@typescript-eslint/eslint-plugin": "7.17.0",
    "@typescript-eslint/parser": "7.17.0",
    "ajv": "8.12.0",
    // *snip*
    "eslint": "8.57.0",
    "jasmine-core": "5.1.0",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.4.0",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.0",
    "karma-firefox-launcher": "^2.1.3",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "karma-spec-reporter": "0.0.36",
    "protractor": "7.0.0",
    "ts-node": "8.3.0",
    "typescript": "5.5.3"
  },

Additional information

I saw #1584 having raised the same issue already, but it could not be reproduced.

I already removed a .npmrc for testing and retried. Does not work.

Also removed the whole package-json.lock file and retried.

[rklec]

Asked ChatGPT and it found #1681, so the package-json in here https://github.com/valor-software/ng2-charts/blob/master/libs/ng2-charts-schematics/package.json is also some strange version hmm?

Verbose logging also reveals this error here:

$ ng add --verbose ng2-charts
Cannot read properties of undefined (reading '0')
√ Determining Package Manager
  › Using package manager: npm
√ Searching for compatible package version
  › Found compatible package version: ng2-charts@0.0.0.
√ Loading package information from registry
/ Confirming installation

Also reproduced this in a freshly generated Angular 20 (20.3.3) projects for testing. Just ng new and after it is finished executing that command. This time, it shows no such additional error through. But it still cannot install it using ng add.

[rklec]

Maybe it also does not resolve due to the version mismatches/problems here: #2012 and #2010

[rklec]

Installing v7.0.0 then works

$ npm install ng2-charts@7.0.0 --save

added 4 packages in 22s

197 packages are looking for funding
  run `npm fund` for details

Afterwards ng add ng2-charts also works.