错误：[$ injector：nomod]模块“ chart.js”不可用

Question

I am trying to use angular-chart.js in my application, though i'm getting the following error:

Error: [$injector:nomod] Module 'chart.js' is not available

I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.

Here are the versions of the libraries i've installed:

Here is my directory structure :

 app/
 ----libs/
 ------Chart.js/
 ----------src/
 ------------chart.js
 ------angular-chart.js/
 --------dist/
 ----------angular-chart.js
 ----------angular-chart.css
 --index.html

Here is the link to the libraries installed with bower in my index.html :

<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>

<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">

I am trying to inject chart.js module into my controller like so:

angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }

Any suggestions? Thanks!

Answer 1

The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.

Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.

Can you provide a complete repro step using this template ?

Answer 2

I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:

<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>

It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.

Next, you state

I am trying to inject chart.js module into my controller

The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.

The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.