I have recently started to use angular, more specifically the generator angular-fullstack (https://github.com/angular-fullstack/generator-angular-fullstack).
I try to use the angular-chart-js (https://github.com/jtblin/angular-chart.js) library for displaying graph in my app but unsuccefully. I always get an error when I add chart.js in the "app" module dependency.
What I have done :
Installing angular-chart.js with the command "npm install --save angular-chart.js" (in my app root folder), I have checked the dependency in the "package.json" file.
Modify index.html and _index.html
<head>
<script src="../node_modules/chart.js/dist/Chart.js"></script>
<script src="../node_modules/angular-chart.js/dist/angular-chart.js"></script>
</head>
app.js
angular.module('myApp', ['chart.js']);
This config gives me the error
Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
After I have tried a different configuration
Move the line from index.html and _index.html to main.html
main.html
<script src="../../../node_modules/chart.js/dist/Chart.js"></script>
<script src="../../../node_modules/angular-chart.js/dist/angular-chart.js"></script>
Import the library in a different way, and disable the strict mode app.js.
app.js
import chartJs from 'chart.js';
angular.module('myApp', [chartJs]);
angular.element(document)
.ready(() => {
angular.bootstrap(document, ['myApp'], {
strictDi: false
});
});
and with this setup I get this error
Error: [$injector:modulerr] Failed to instantiate module function (context, config) due to: Error: [$injector:unpr] Unknown provider: context
If you need more informations, just tell me.
Thanks in advance!
