0

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!

Anthony
  • 11
  • 4

1 Answers1

1

I have found the bug !!

Here is my changes

app.js 

import chartJs from 'angular-chart.js';
angular.module('myApp', [chartJs]);

angular.element(document)
  .ready(() => {
    angular.bootstrap(document, ['myApp'], {
      strictDi: true
    });
  });

The library name was wrong, and I can enable again the "strict mode".

Anthony
  • 11
  • 4