angular.module（'myapp'，['chart.js']）未捕获的错误：[$ injector：modulerr]

Question

I am new at Working with Angular.JS. Want to make chart using chart.js

I've installed chart.js with

npm install angular-chart.js --save

.state('index.dashboard', {
            url: "/dashboard",
            templateUrl: "modules/dashboard/dashboard.html",
            controller: 'dashboardController',
            data: { pageTitle: 'Dashboard' },
            resolve: {
                loadPlugin: function($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                            serie: true,
                            files: ['css/plugins/c3/c3.min.css', 'js/plugins/chartJs/Chart.min.js', 'js/plugins/d3/d3.min.js', 'js/plugins/c3/c3.min.js']
                        }, {
                            serie: true,
                            name: 'gridshore.c3js.chart',
                            files: ['js/plugins/c3/c3-angular.min.js']
                        }, {
                            serie: true,
                            name: 'angular-dygraphs',
                            files: ['bower_components/angular-dygraphs/src/angular-dygraphs.js']
                        }, {
                            serie: true,
                            files: ['css/style_2.css', 'js/plugins/highcharts/highstock.src.js']
                        }, {
                            serie: true,
                            name: 'highcharts-ng',
                            files: ['js/plugins/highcharts/highcharts-ng.js']
                        },{
                            serie: true,
                            name:"chart.js",
                            files:['js/plugins/chartJs/angular-chart.js']
                        },
                        //               {
                        // name: 'chart.js',
                        //                   files: ['bower_components/Chart.Zoom.js/src/chart.zoom.js']
                        // //               },
                        //               {
                        //                   name: 'angles',
                        //                   files: ['js/plugins/chartJs/angles.js']
                        //               },
                        {
                            files: ['css/plugins/jsTree/style.min.css', 'js/plugins/jsTree/jstree.min.js', 'css/plugins/iCheck/custom.css', 'js/plugins/iCheck/icheck.min.js']
                        }, {
                            name: 'ngJsTree',
                            files: ['js/plugins/jsTree/ngJsTree.min.js']
                        }, {
                            name: 'cgNotify',
                            files: ['css/plugins/angular-notify/angular-notify.min.css', 'js/plugins/angular-notify/angular-notify.min.js']
                        }
                    ]);
                },
                authenticated: authenticated
            }
        })

and now i am adding that to my controller

angular.module('inspinia',['chart.js'])
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);  

I've tried with

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http','chart.js',  function($rootScope, $scope, $http) {
var a = 0;
}]);

but getting same error of

Uncaught Error: [$injector:modulerr]

Please help me with correct way Thanks in advcance

Answer 1

You dont have to inject chart.js to the controller,

change it as,

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);

DEMO

Answer 2

1. Include the angular-chart.js script tag in your index.html , after angular.js , as suggested by Tushar.

2. Add chart.js as a module dependency when initializing your inspinia module, just as you did in your first code snippet.

3. Use the directives provided by the module, there's no need to inject anything in your controllers.

Answer 3

be sure to import it in app.js like:

"use strict";

angular.module("yourmodulename",
[
    "ui.router",
     "chart.js" //<-- import it
]);

And the use it in your controller ... Or if you use OcLazy (for lazy loading ) something like:

.state("profile.index", {
                url: "/profile",
                templateUrl: "/app/view/template/profilo/profile.html",
                controller: "ProfileController",
                controllerAs: "profileCtrl",
                resolve: {
                    loadPlugin: function ($ocLazyLoad) {
                        return $ocLazyLoad.load([

                            {
                                name: "chart.js",
                                serie: true,
                                files: ["/app/view/assets/lib/bower/Chart.js/Chart.min.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.css"]
                            }
                        ]);
                    }

                }
            })

Answer 4

I have got the same problem but different pages, so i needed to add EVERY SIGLE PAGE code snippet and error is gone. However, I didn't understand the reason whey i needed to add.

<script src="node_modules/Chart.min.js"></script>
<script src="node_modules/angular-chart.min.js"></script>

Answer 5

Putting

<script src="lib/chart.js/dist/Chart.min.js"></script>

before

<script src="lib/chart.js/dist/angular-chart.js"></script>

solved my problem

And I've removed

('myapp',['chart.js'])