Ng2-charts: installing components

[20centcroak]

Hi,
I'm new to angular and then my questions could be very naive.
First here are pieces of information about my angular versions:
@angular/cli: 1.0.1
node: 7.9.0
os: win32 x64
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

I followed the instructions to install via npm ng2-charts, chart.js and I have imported the component in my modules.
But chart.js installed in node_modules which is as the same level than my src directory. Using "" in the index.html file, I always have an error (can't get the file). Then I moved manually chart.js in the assets diretcory for a try. Then using "" there is no getting error while observing the console.
However I always have the following error: ERROR Error: ng2-charts configuration issue: Embedding Chart.js lib is mandatory

Can you help?

[mark-win]

If you used @angular/cli to create the project, you can let webpack handle the js assets for you.
Instead of including the .js files yourself in index.html, you need to add the path to your .angular-cli.json like this:

...
    "apps": [
        ...
        "scripts": [
            ...
            "../node_modules/chart.js/src/chart.js",
            ...
        ],
        ...
    ]
...

Notice that changes to .angular-cli.json will not affect right away, if you use ng serve. You will need to re run the command.

Also notice that there also is a styles member next to scripts where you can do the same to .css or .scss files

[20centcroak]

Thanks for your help. It is very useful. Now I don't have to put chart.js in the asset directory and there is no "getting" error.

However I still have the same error with ng2-charts :

ERROR Error: ng2-charts configuration issue: Embedding Chart.js lib is mandatory
Trace de la pile :
BaseChartDirective.prototype.getChartBuilder@http://localhost:4200/vendor.bundle.js:66143:19 [angular]
BaseChartDirective.prototype.refresh@http://localhost:4200/vendor.bundle.js:66199:22 [angular]
BaseChartDirective.prototype.ngOnInit@http://localhost:4200/vendor.bundle.js:66085:13 [angular]

Any idea ?

Here is my .angular-cli.json file :
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "chart-vp-app" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ "../node_modules/chart.js/src/chart.js" ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }
I have installed chart.js via npm :
npm install chart.js --save

and I can see it in my node_modules directory.

Transpilling is ok :

ng serve -o
** NG Live Development Server is running on http://localhost:4200 **
 10% building modules 6/9 modules 3 active ...ode_modules\style-loader\addStyles.jswebpack: wait until bundle finished: /
Hash: 0038f4b162f169973a16
Time: 9879ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {4} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 8.48 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.46 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 57ebe6bccaa1f0be6846
Time: 259ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {4} [initial]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 8.47 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.46 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.
webpack: Compiling...
Hash: e568c1bffdb6441e2536
Time: 424ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {4} [initial]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 8.47 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.46 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 94615e4a5c5c445259e6
Time: 215ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {4} [initial]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 7.91 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.46 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 7d6eae21ff951165fbdc
Time: 554ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 166 kB {4} [initial]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 8.6 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.46 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.

[mark-win]

Make sure you rebuild the entire app (i.e. re-run ng serve), so changes to .angular-cli.json take effect.

Try reloading the page without caches isn't a bad idea as well.

Finally, if nothing works, I can only suggest, to look for chart.js specific code in the stuff that is being sent to your browser. I.e. I just found Chart.Bar = function(context, config) { in the file 0.chunk.js. Could be any other leading number in your case or vendor.bundle.js, if you don't use any lazy loading.
Then you should know, weather the lib is loaded by your client or not, which is the closest I can get you to the problem. Sadly I'd have no clue how to fix it either way, as the first two steps should have done already.

EDIT: fyi: I'm using the same versions and "include procedure" as you seem to be using, right now on a project as well and it works as expected. I did nothing fancy to the project structure angular-cli created either.

[20centcroak]

Thanks. rebuild and empty the cache does not fix the pb sadly. The message "Embedding Chart.js lib is mandatory" let me think that chart.js is not accessible but I don't know why and I may be wrong...

[mark-win]

Try including the built version of chart.js:

"scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js"
      ],

[20centcroak]

And it works !
Tanks so much for your help, I really appreciate.