Recently, I decided to incorporate Angular into my project by utilizing the angular-fullstack generator (available at https://github.com/angular-fullstack/generator-angular-fullstack).
My intention was to use the angular-chart-js library (https://github.com/jtblin/angular-chart.js) for displaying graphs in my application. However, I encountered an error when attempting to add chart.js as a dependency to the "app" module.
Here's what I've done so far:
First, I installed angular-chart.js using the command "npm install --save angular-chart.js" within my app's root folder and verified the dependency in the "package.json" file.
I made modifications to both index.html and _index.html files.
<head>
<script src="../node_modules/chart.js/dist/Chart.js"></script>
<script src="../node_modules/angular-chart.js/dist/angular-chart.js"></script>
</head>
In my app.js file, I included the library like this:
angular.module('myApp', ['chart.js']);
However, this configuration resulted in the following 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 trying a different setup:
I moved the script references from index.html and _index.html to main.html.
Code snippet from main.html:
<script src="../../../node_modules/chart.js/dist/Chart.js"></script>
<script src="../../../node_modules/angular-chart.js/dist/angular-chart.js"></script>
Furthermore, I imported the library differently and disabled strict mode in my app.js file.
Modified app.js code:
import chartJs from 'chart.js';
angular.module('myApp', [chartJs]);
angular.element(document)
.ready(() => {
angular.bootstrap(document, ['myApp'], {
strictDi: false
});
});
Despite these changes, I encountered another error:
Error: [$injector:modulerr] Failed to instantiate module function (context, config) due to: Error: [$injector:unpr] Unknown provider: context
If more information is needed, please let me know. Thanks in advance!