Uncompatible with Angular 12 and 13

[pappk]

https://github.com/fusioncharts/angular-fusioncharts/blob/586de8a761509f7a0aa8c30c5f8cd9fe2b750dc8/package.json#L49

Description

The project has a hard dependency for @angular/core@^4.0.0 and other angular modules with the same 4.0.0 version. However, it causes unresolved dependency problems with newer Angular versions. With the latest NodeJS (v16.13.0) and NPM (v8.1.3) version, this problem even blocks a standard npm install command in a project if it has the angular-fusioncharts package as a dependency.

Reproduction

NodeJS: v14.18.1 npm: v6.14.15

A freshly generated project with Angular CLI package.json

{
  "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "angular-fusioncharts": "^3.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.13",
    "@angular/cli": "~12.2.13",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

Execute: npm install

Output:

c:\sandbox\angular-tour-of-heroes>npm i
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-fusioncharts@3.2.0 requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-fusioncharts@3.2.0 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-fusioncharts@3.2.0 requires a peer of zone.js@^0.8.16 but none is installed. You must install peer dependencies yourself.

With newer NPM (v8.1.3) the install doesn't even executed due to the following error:

c:\sandbox\angular-tour-of-heroes>npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-tour-of-heroes@0.0.0
npm ERR! Found: @angular/core@12.2.13
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^12.2.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^4.0.0" from angular-fusioncharts@3.2.0
npm ERR! node_modules/angular-fusioncharts
npm ERR!   angular-fusioncharts@"^3.2.0" from the root project

To bypass this error, the only way how the project's dependencies can be installed is the following way:

npm i --legacy-peer-deps

The hardcoded outdated dependencies should be removed from the fusioncharts' package.json file.

[matthewtquinn1]

Is there an update coming for this?

[AyanBhadury]

@matthewtquinn1 what is the issue are you facing

[matthewtquinn1]

Hi @AyanBhadury, I've asked a more accurate question now in my own issue: https://github.com/fusioncharts/angular-fusioncharts/issues/140

[jberndsen]

The problem is not necessarily compatibility with Angular, the Fusioncharts code itself is fine. The problem is in the peerDependencies declaration in angular-fusioncharts (here: https://github.com/fusioncharts/angular-fusioncharts/blob/develop/dist/package.json#L37) and occurs during installation. If the package is preinstalled, and you then switch the Node version, the problem does not occur.

If you would change "@angular/core": "^4.0.0", to "@angular/core": ">=4.0.0", I think that would already solve the issue. A google search for "npm peer dependency multiple versions" provides more examples.

Here is a really small package.json which demonstrates the issue. If you switch to NPM 8 before running npm install (I tested this using nvm) and then install, the error occurs.

{
  "name": "standard-ui",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "angular-fusioncharts": "^3.2.0",
    "fusioncharts": "^3.18.0",
    "rxjs": "~6.6.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
}

[jerone]

@itfusion

Please allow for an wider range of Angular package version in your package.json. This package is the only package requiring us to use force upgrades.

E.g.

npx @angular/cli@latest update @angular/core @angular/cli --force  

Or via --legacy-peer-deps.

[shineski]

Are there any plans to support Angular 14?

[AyanBhadury]

@shineski yes, but right now upto 13.x is supported you can clone the repo and update the dependencies to make it angular 14 compatible

[paksydavid]

In the meantime Angular 15 was released: https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8