Ng2-charts: Error: Can't resolve '@valor-software/ng2-charts'

Created on 13 Sep 2020  ·  21Comments  ·  Source: valor-software/ng2-charts

My angular app is running perfectly in local environment. But when I try to build app (ng build --aot), it shows the following error:

Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app'
ERROR in ./src/app/views/dashboard/dashboard.module.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard'
ERROR in ./src/app/views/dashboard/user-stats/user-stats.component.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard\user-stats'

Global Angular:

Angular CLI: 9.1.12
Node: 12.18.3
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.12
@angular-devkit/core         9.1.12
@angular-devkit/schematics   9.1.12
@schematics/angular          9.1.12
@schematics/update           0.901.12
rxjs                         6.5.4

App angular::

    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "^9.0.1",
    "@angular/compiler-cli": "^9.0.0",

ng-charts

"ng2-charts": "^2.4.1",
"chart.js": "^2.9.2",

How can I solve this issue? Thanks in Advance

picture sabbir-hossain
👍2

Most helpful comment

I think I just had a lucky break, I added this to tsconfig.app.json, under "compilerOptions":

    "paths": {
      "@valor-software/ng2-charts": ["node_modules/ng2-charts"]
    }

So this is the complete file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "paths": {
      "@valor-software/ng2-charts": ["node_modules/ng2-charts"]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

It now works with [email protected]

picture paviad on 14 Sep 2020
👍6 🎉2

All 21 comments

@valor-software/ng2-charts ng2-charts@noreply.github.com was mistakenly
published, it might have ended up in your package-lock.json - delete that
and run npm i again

On Sun, Sep 13, 2020 at 3:26 PM Sabbir Hossain notifications@github.com
wrote:

My angular app is running perfectly in local environment. But when I try
to build app (ng build --aot), it shows the following error:

Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app'
ERROR in ./src/app/views/dashboard/dashboard.module.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard'
ERROR in ./src/app/views/dashboard/user-stats/user-stats.component.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in '.\src\app\views\dashboard\user-stats'

Global Angular:

Angular CLI: 9.1.12
Node: 12.18.3
OS: win32 x64

Angular:
...
Ivy Workspace:

Package Version

@angular-devkit/architect 0.901.12
@angular-devkit/core 9.1.12
@angular-devkit/schematics 9.1.12
@schematics/angular 9.1.12
@schematics/update 0.901.12
rxjs 6.5.4

App angular::

"@angular-devkit/build-angular": "~0.900.1",
"@angular/cli": "^9.0.1",
"@angular/compiler-cli": "^9.0.0",

ng-charts

"ng2-charts": "^2.4.1",
"chart.js": "^2.9.2",

How can I solve this issue? Thanks in Advance

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/1260, or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJNV2BVZJAR5AH2DBMEOW3SFS26RANCNFSM4RKUI26A
.

paviad picture paviad on 13 Sep 2020

@sabbir-hossain please close if resolved.

paviad picture paviad on 14 Sep 2020

Same issue with me and even after deleting package-lock.json and running npm i the issue persists.

My configuration:
"@angular/core": "^8.2.14",
"chart.js": "^2.9.3",
"ng2-charts": "^2.3.3"

AhmedGMurtaza picture AhmedGMurtaza on 14 Sep 2020

if you do git grep @valor-software does anything come up?

On Mon, Sep 14, 2020 at 4:23 PM Ahmed Murtaza notifications@github.com
wrote:

Same issue with me and even after deleting package-lock.json and running npm
i the issue persists.

My configuration:
"@angular/core": "^8.2.14",
"chart.js": "^2.9.3",
"ng2-charts": "^2.3.3"

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/1260#issuecomment-692049576,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJNV2AQTFKVIYCDWLHJRODSFYKOTANCNFSM4RKUI26A
.

paviad picture paviad on 14 Sep 2020

if you do git grep @valor-software does anything come up?
…
On Mon, Sep 14, 2020 at 4:23 PM Ahmed Murtaza @.> wrote: Same issue with me and even after deleting package-lock.json and running *npm i the issue persists. My configuration: @.*/core": "^8.2.14", "chart.js": "^2.9.3", "ng2-charts": "^2.3.3" — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1260 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJNV2AQTFKVIYCDWLHJRODSFYKOTANCNFSM4RKUI26A .

No it does not show anything

AhmedGMurtaza picture AhmedGMurtaza on 14 Sep 2020

Please paste the result of npm ls here

paviad picture paviad on 14 Sep 2020

I am trying to reproduce this without success. I am using @angular/[email protected] and doing ng new chartstest followed by npm i -S ng2-charts chart.js then adding these to app.module.ts:

import * as ch from 'ng2-charts';
...
  imports: [
    BrowserModule,
    ch.ChartsModule,
  ],
...
  constructor(theme: ch.ThemeService) {
    const v = theme.getColorschemesOptions();
    console.log('theme', v);
  }

And then doing ng build --aot and I am getting no errors...

Can you tell me how to reproduce it?

This is the resulting package.json by the way:

{
  "name": "chartstest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "chart.js": "^2.9.3",
    "ng2-charts": "^2.4.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.1",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}
paviad picture paviad on 14 Sep 2020

Hi, I'm facing the same issue here, even after deleting the following:

  • node_modules
  • package-lock.json

I also tested it from a clean docker image to make sure it wasn't related to my dev PC.
I'm using the ng build --prod --build-optimizer --aot command for my build.

Here is the ng2-charts section from npm ls. My project is using Angular 8 at the moment.

+-- [email protected] 
| +-- @types/[email protected]
| | -- [email protected] deduped 
| +-- [email protected] 
| -- [email protected]

(Both version 2.3.3 and 2.4.1 produced the same issue)

And here is an abstract of the actual issue report

ERROR in ./src/app/shared/dashboard/dashboard-element-pie/dashboard-element-pie.component.ngfactory.js
Module not found: Error: Can't resolve '@valor-software/ng2-charts' in 'E:\Users\alexandre\Documents\gitlab\CMPKit\cloud\frontend\src\app\shared\dashboard\dashboard-element-pie'
resolve '@valor-software/ng2-charts' in 'E:\Users\alexandre\Documents\gitlab\CMPKit\cloud\frontend\src\app\shared\dashboard\dashboard-element-pie'

I also found a mention of this issue here: https://gitmemory.com/issue/angular/angular-cli/18774/691676166

I don't know if there any npm-side cache involved here, but this issue is actually preventing the compilation of my project so any workaround would be much appreciated! (BTW I'm in France, this can be a useful info for cache-things)

nesnes picture nesnes on 14 Sep 2020

@nesnes what is your docker setup - I want to be able to reproduce it

paviad picture paviad on 14 Sep 2020

I finally managed to reproduce it, with @angular/cli@^8.0.0

paviad picture paviad on 14 Sep 2020
👍1

Ok downgrading to [email protected] solves the issue for me with angular 8, I still need reproduction assistance

paviad picture paviad on 14 Sep 2020

Thanks for your tests and inputs. (You are pretty reactive 👍 )

I just manage to compile by making sure package.json doesn't contain "ng2-charts": "^2.3.3" but "ng2-charts": "2.3.3". The ^ was probably causing the 2.4.1 to be recognized as a compatible version.

What worked for me:

  • Open package.json
  • Make sure that the ng2-chart line is EXACTLY "ng2-charts": "2.3.3"
  • Run npm i in a terminal (at the root of your project)
  • From now the compilation should be fine, personally I'm using the ng build --prod --build-optimizer --aot command.
nesnes picture nesnes on 14 Sep 2020
❤1 👍1

I think I just had a lucky break, I added this to tsconfig.app.json, under "compilerOptions":

    "paths": {
      "@valor-software/ng2-charts": ["node_modules/ng2-charts"]
    }

So this is the complete file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "paths": {
      "@valor-software/ng2-charts": ["node_modules/ng2-charts"]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

It now works with [email protected]

paviad picture paviad on 14 Sep 2020
👍6 🎉2

Hi @paviad thank you for your code snippet but I think your solution is only workaround. I found "@valor-software" string in v2.4.1 bundles and metadata.json. It looks like package was build with incorrect package name. You should rebuild package, increment version and unpublish corrupted version 2.4.1

grep "@valor-software" -R .

./node_modules/ng2-charts/valor-software-ng2-charts.metadata.json:{"__symbolic":"module","version":4,"metadata":{"ChartsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BaseChartDirective"}],"imports":[],"exports":[{"__symbolic":"reference","name":"BaseChartDirective"}]}]}],"members":{}},"SingleDataSet":{"__symbolic":"interface"},"MultiDataSet":{"__symbolic":"interface"},"SingleOrMultiDataSet":{"__symbolic":"interface"},"PluginServiceGlobalRegistrationAndOptions":{"__symbolic":"interface"},"SingleLineLabel":{"__symbolic":"interface"},"MultiLineLabel":{"__symbolic":"interface"},"Label":{"__symbolic":"interface"},"BaseChartDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":63,"character":1},"arguments":[{"selector":"canvas[baseChart]","exportAs":"base-chart"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"datasets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"labels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"chartType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"plugins":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"chartClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":3}}]}],"chartHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":113,"character":21},{"__symbolic":"reference","name":"ThemeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"themeChanged":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"copyLabel":[{"__symbolic":"method"}],"labelsEqual":[{"__symbolic":"method"}],"copyColor":[{"__symbolic":"method"}],"colorsEqual":[{"__symbolic":"method"}],"updateColors":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"hideDataset":[{"__symbolic":"method"}],"isDatasetHidden":[{"__symbolic":"method"}],"toBase64Image":[{"__symbolic":"method"}],"getChartConfiguration":[{"__symbolic":"method"}],"getChartBuilder":[{"__symbolic":"method"}],"smartMerge":[{"__symbolic":"method"}],"isMultiLineLabel":[{"__symbolic":"method"}],"joinLabel":[{"__symbolic":"method"}],"propagateDatasetsToData":[{"__symbolic":"method"}],"propagateDataToDatasets":[{"__symbolic":"method"}],"isMultiDataSet":[{"__symbolic":"method"}],"getDatasets":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}]}},"Color":{"__symbolic":"interface"},"Colors":{"__symbolic":"interface"},"defaultColors":[[255,99,132],[54,162,235],[255,206,86],[231,233,237],[75,192,192],[151,187,205],[220,220,220],[247,70,74],[70,191,189],[253,180,92],[148,159,177],[77,83,96]],"ThemeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setColorschemesOptions":[{"__symbolic":"method"}],"getColorschemesOptions":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"monkeyPatchChartJsLegend":{"__symbolic":"function"},"monkeyPatchChartJsTooltip":{"__symbolic":"function"}},"origins":{"ChartsModule":"./lib/charts.module","SingleDataSet":"./lib/base-chart.directive","MultiDataSet":"./lib/base-chart.directive","SingleOrMultiDataSet":"./lib/base-chart.directive","PluginServiceGlobalRegistrationAndOptions":"./lib/base-chart.directive","SingleLineLabel":"./lib/base-chart.directive","MultiLineLabel":"./lib/base-chart.directive","Label":"./lib/base-chart.directive","BaseChartDirective":"./lib/base-chart.directive","Color":"./lib/color","Colors":"./lib/colors","defaultColors":"./lib/default-colors","ThemeService":"./lib/theme.service","monkeyPatchChartJsLegend":"./lib/monkey-patch-chart-js-legend","monkeyPatchChartJsTooltip":"./lib/monkey-patch-chart-js-tooltip"},"importAs":"@valor-software/ng2-charts"}
./node_modules/ng2-charts/bundles/valor-software-ng2-charts.umd.js:    typeof define === 'function' && define.amd ? define('@valor-software/ng2-charts', ['exports', '@angular/core', 'rxjs', 'lodash-es', 'chart.js'], factory) :
./node_modules/ng2-charts/bundles/valor-software-ng2-charts.umd.min.js:!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("lodash-es"),require("chart.js")):"function"==typeof define&&define.amd?define("@valor-software/ng2-charts",["exports","@angular/core","rxjs","lodash-es","chart.js"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self)["valor-software"]=t["valor-software"]||{},t["valor-software"]["ng2-charts"]={}),t.ng.core,t.rxjs,t._,t.chart_js)}(this,(function(t,e,r,o,a){"use strict";
vlapo picture vlapo on 22 Sep 2020
👍1

I believe 2.4.1 was built correctly. The workaround is actually needed for Angular version <9

paviad picture paviad on 22 Sep 2020

I dont think so. Fast test:

  1. Install @angular/cli@8
  2. Create new empty project
  3. install ng2-charts
  4. Import ChartsModule
  5. Run build ng build --prod

Build failed with Module not found: Error: Can't resolve '@valor-software/ng2-charts'

  1. Remove all @valor-software/ strings from all files in ./node_modules/ng2-charts/* - so we will have ng2-charts instead of @valor-software/ng2-charts. I have to change files:
    node_modules/ng2-charts/valor-software-ng2-charts.metadata.json node_modules/ng2-charts/bundles/valor-software-ng2-charts.umd.min.js node_modules/ng2-charts/bundles/valor-software-ng2-charts.umd.js
  2. Run build again ng build --prod

Build passed.

vlapo picture vlapo on 22 Sep 2020

But does the workaround work instead of your way? Because I know it doesn't work out of the box in Angular <9

paviad picture paviad on 22 Sep 2020

Sure it works. Your workaround is just redirecting compiler from @valor-software/ng2-charts path to node_modules/ng2-charts. But why should I use workaround when this is clearly problem in [email protected] package.

@valor-software/ng2-charts ng2-charts@noreply.github.com was mistakenly

As you said @valor-software/ng2-charts was mistake so why do we see the signs of @valor-software/ng2-charts in [email protected] package?

vlapo picture vlapo on 23 Sep 2020

2.4.1 was published correctly, and works out of the box in Angular>=9 - what you are saying is not an indication of @valor-software being in there for no reason, because I checked and double checked.

Just one more thing, check which registry npm is using to fetch packages, run npm config get registry - it should be https://registry.npmjs.org/

I will publish 2.4.2 again just in case - won't hurt.

paviad picture paviad on 23 Sep 2020

Version 2.4.2 published, indeed when I install it now, no @valor-software appears when using grep - you were right.

paviad picture paviad on 23 Sep 2020

Not it works. Thank you! 🙏

vlapo picture vlapo on 23 Sep 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

grahammutter picture grahammutter  ·  4Comments
mrpotato3 picture mrpotato3  ·  5Comments
dj-techs picture dj-techs  ·  3Comments
raychenfj picture raychenfj  ·  3Comments
dslima90 picture dslima90  ·  3Comments