Angular How to import chart.js javascript file into angular. Don't want to use npm install.

Question

User956626884 posted

UPdate: I found the answer on the following link

https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Hi,

I am using chart.js package in my angular application. I made some changes on the chart.js file and now need to import the revised into my angular application component which is using Angular 6. In the beginning, I used npm install for chart.js and using the following import statement to start getting chart to work.

import { Chart } from 'chart.js'

After I made custom changes to chart.js, I will need to uninstall chart and copy the chart folder from node_modules to somewhere else. I did do this and tried to use the following import statement

import { Chart } from './../../libraries/chart/Chart.js';

Visual Studio will give a red highlight error on { Chart } and say Module has no exported member 'Chart'

I googled and some postings say add the chart folder path to the following location angular-cli.json script section but I don't have the file so I added the script changes to angular.json script section. Another post say make the changes in the tsconfig.json to let typescript know about chart module location but I am not sure how to make that change on the following

 

Answer 1

User283571144 posted

Hi comicrage,

If you want to add custom chart.js into your angular project, I suggest you could refer to below steps:

Step: 1=> Copy your custom "Chart.js" in /app folder.  

For exmaple:  You add below codes in it:

export function synapseThrow() {
  return 'hello'
}

export const MY_VAR = 'world!';

Step: 2=> in angular.json, add the below part in apps object.   

"scripts": ["app/Chart.js"]

Step: 3=> in tsconfig.json, add the below property in compilerOptions.

"allowJs": true

Step: 4=> in any component say in "app.component.ts" import the "chart.js" file using importkeyword.

app.component.ts

// other imports

import { MY_VAR, synapseThrow } from './chart';

// other app code here

ngOnInit(){
  const returned = MY_VAR;
  const returnFunc = synapseThrow();
}

Result:

The VScode doesn't show any mistake:

Best Regards.

Brando

Answer 2

User956626884 posted

Thanks Bando for the clear steps.