Can not find Chart object in chartjs-plugin-labels.js

Question

Good day,

In my angular project, I would like to use the chart plugin, thus I run the both command as follow:

npm install angular2-chartjs
npm install chartjs-plugin-labels

and then I import it in my ts file as follow:

import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-labels';

and in my package.json, I have this:

"angular2-chartjs": "^0.5.1",
"chartjs-plugin-labels": "^1.1.0",

In my local, I start my angular project by ng serve command, everything working fine.

But when I generate the web package and deploy to SIT apache web server, I will hit "Can not find Chart object" error when I load the page.

The error I saw from chrome console is something as follow:

And I believe its throw from chartjs-plugin-lables.js:

I generate SIT package using npm run sit command:

The following is part of my package.json, on what it doing for ng serve and npm run sit:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "demo": "ng build -c=demo --base-href=/demo/",
    "dev": "ng build -c=dev --base-href=/sib/",
    "sit": "ng build -c=sit --base-href=/sib/ && ts-node git.version.ts -c sit && ts-node app.version.ts -c sit",
    "uat": "ng build -c=uat --base-href=/sib/ && ts-node git.version.ts -c uat && ts-node app.version.ts -c uat",
    "prod": "ng build -c=prod --base-href=/sib/ && ts-node git.version.ts -c prod && ts-node app.version.ts -c prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "version": "ts-node git.version.ts -c prod"
  },

What I suspect is, when I run npm run sit, the way to generate the web package is different, and some how the char object did not generate into web package.

But so far no issue for other plugin.

Kindly advise.

Answer 1

I had the same issue. Check through the project for a single import of 'chartjs-plugin-labels.js' and remove it.