search

valor-software / ng2-charts

Beautiful charts for Angular based on Chart.js
http://valor-software.github.io/ng2-charts/
MIT License
2.35k stars 574 forks source link

Build errors after adding 3.0.1 to project #1355

Closed jacodv closed 2 years ago

jacodv commented 2 years ago

Our project builds successfully without ng2-charts (3.0.1) and chart.js (3.6.2). Below are the dependencies as well as the first page or two of the build errors (they are many).

I only added the appModule imports, not even started using the actual library.

Dependencies

{
"dependencies": {
    "@angular/animations": "^11.0.5",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "^11.0.5",
    "@angular/compiler": "^11.0.5",
    "@angular/core": "^11.0.5",
    "@angular/forms": "^11.0.5",
    "@angular/platform-browser": "^11.0.5",
    "@angular/platform-browser-dynamic": "^11.0.5",
    "@angular/router": "^11.0.5",
    "@apollo/client": "^3.3.14",
    "@aspnet/signalr": "^1.1.4",
    "@clr/angular": "^4.0.8",
    "@clr/core": "^3.0.0",
    "@clr/icons": "^4.0.8",
    "@clr/ui": "^4.0.8",
    "@nebular/bootstrap": "^7.0.0",
    "@nebular/eva-icons": "^7.0.0",
    "@nebular/theme": "^7.0.0",
    "@ngrx/effects": "10.1.2",
    "@ngrx/router-store": "10.1.2",
    "@ngrx/store": "10.1.2",
    "@nrwl/angular": "11.1.5",
    "@tinymce/tinymce-angular": "^4.2.0",
    "@types/chroma-js": "^2.1.3",
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "apollo-angular": "2.4.0",
    "apollo-angular-link-http": "^1.11.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-ws": "^1.0.20",
    "bootstrap": "^4.5.0",
    "chart.js": "^3.6.2",
    "chartjs-plugin-datalabels": "^2.0.0",
    "chroma-js": "^2.1.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.2.1",
    "document-register-element": "^1.14.3",
    "eva-icons": "^1.1.2",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "ng-mocks": "^8.1.0",
    "ng2-charts": "^3.0.1",
    "ng2-pdf-viewer": "^7.0.2",
    "ngx-color-picker": "^11.0.0",
    "ngx-colors": "^2.6.1",
    "ngx-infinite-scroll": "^9.0.0",
    "ngx-monaco-editor": "^9.0.0",
    "ngx-pagination": "4.1.0",
    "ngx-toastr": "^13.2.1",
    "rxjs": "6.6.3",
    "subscriptions-transport-ws": "^0.11.0",
    "tslib": "^2.0.3",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
}

Build output subset

Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 239:165-175
Can't import the named export 'ArcElement' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:88:6)
    at HarmonyImportSpecifierDependency.getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1463:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Git\Oakmoon\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1253:28)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compiler.js:672:17
    at _done (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:36:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1185:12
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1097:9
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
 @ ./libs/dashboard/src/lib/dashboard.module.ts
 @ ./apps/admin/src/app/app.module.ts
 @ ./apps/admin/src/main.ts
 @ multi ./apps/admin/src/main.ts
9m
Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 239:118-131
Can't import the named export 'BarController' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:88:6)
    at HarmonyImportSpecifierDependency.getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1463:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Git\Oakmoon\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1253:28)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compiler.js:672:17
    at _done (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:36:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1185:12
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1097:9
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
 @ ./libs/dashboard/src/lib/dashboard.module.ts
 @ ./apps/admin/src/app/app.module.ts
 @ ./apps/admin/src/main.ts
 @ multi ./apps/admin/src/main.ts

Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 239:133-143
Can't import the named export 'BarElement' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:88:6)
    at HarmonyImportSpecifierDependency.getErrors (C:\Git\Oakmoon\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1463:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Git\Oakmoon\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1253:28)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compiler.js:672:17
    at _done (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (C:\Git\Oakmoon\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:36:22)
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1185:12
    at C:\Git\Oakmoon\node_modules\webpack\lib\Compilation.js:1097:9
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
 @ ./libs/dashboard/src/lib/dashboard.module.ts
 @ ./apps/admin/src/app/app.module.ts
 @ ./apps/admin/src/main.ts
 @ multi ./apps/admin/src/main.ts
jacodv commented 2 years ago

Sorry I see the angular version was not updated as part of the upgrage :-( Let me do that first ....

santam85 commented 2 years ago

Looks like the Typescript compiler configuration might be to blame here, are you able to reproduce this on a clean project? compare the tsconfig.json

santam85 commented 2 years ago

@jacodv any updates? were you able to resolve this?

jacodv commented 2 years ago

@santam85, I downgraded to 12. We have more 13 issues, not just on ng charts. I will give it another try as soos as our current stories are complete on 12. Thanks for following up. I will revert here when I start the conversion again.

tru-koto commented 2 years ago

@jacodv - If you can include devDependencies from package.json that will help.

@santam85 - I can confirm I ran into a similar issue, when I was formerly on Angular 11 & TS v4.0.5, after upgrading to TS v4.3.5 and Angular 12 the issue went away

jacodv commented 2 years ago

@tru-koto see below, thanks!

We have upgraded to 12 now. I have not tried to upgrade the charts yet

"devDependencies": {
    "@angular-devkit/build-angular": "12.2.14",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.2.14",
    "@angular/compiler-cli": "12.2.0",
    "@angular/language-service": "12.2.0",
    "@ngneat/spectator": "^8.3.1",
    "@nrwl/cli": "12.10.0",
    "@nrwl/cypress": "12.10.0",
    "@nrwl/eslint-plugin-nx": "12.10.0",
    "@nrwl/jest": "12.10.0",
    "@nrwl/tao": "12.10.0",
    "@nrwl/workspace": "12.10.0",
    "@schematics/angular": "~10.0.0",
    "@types/jest": "27.0.2",
    "@types/jquery": "3.3.31",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "~4.31.0",
    "@typescript-eslint/parser": "~4.31.0",
    "codelyzer": "^6.0.0",
    "cypress": "^6.0.1",
    "dotenv": "10.0.0",
    "eslint": "7.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.2.3",
    "jest-preset-angular": "10.0.1",
    "jest-zone-patch": "0.0.10",
    "ng-packagr": "12.2.6",
    "prettier": "2.3.1",
    "replace-in-file": "^6.1.0",
    "ts-jest": "27.0.5",
    "ts-node": "~9.1.1",
    "tslint": "~6.1.3",
    "typescript": "4.3.5"
  }
santam85 commented 2 years ago

Will try to reproduce this with the versions you mentioned above

nelson6e65 commented 2 years ago

Is this package compatible with Angular 12?

santam85 commented 2 years ago

Could reproduce similar types issues only by using outdated versions of Chart.js. Please make sure you are using v3 of Chart.js

ng2-charts v3 is compatible with angular 12/13, while v4 requires angular 14.