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

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 ng2-charts@2.4.1

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.

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";

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