AngularJS failed to instantiate zingchart module

220 Views Asked by Harry At 10 June 2017 at 17:34

I'm building a web app using mean.io stack. I'm trying to add a 'zingchart-angularjs' dependency and I am getting this error:

[$injector:nomod] Module 'zingchart-angularjs' 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.

I'm new to angular so I'm confused why I could get the 'ngMaterial' dependency working just fine but not the zingchart dependency.

Can someone point me in the right direction/describe what I am doing wrong?

Here is my js file -- dashboard.js

(function() {
'use strict';

/* jshint -W098 */

function DashboardController($scope, Global, Dashboard, $stateParams) {
    $scope.global = Global;
    $scope.package = {
        name: 'dashboard'
    };
}

angular
    .module('mean.dashboard', ['ngMaterial', 'zingchart-angularjs'])
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$scope', 'Global', 'Dashboard', '$stateParams'];

})();

index.html

    <!DOCTYPE html>

<head>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="angular-animate.js"></script>
  <script type="text/javascript" src="angular-aria.js"></script>
  <script type="text/javascript" src="angular-material.js"></script>
  <script type="text/javascript" src="zingchart.min.js"></script>
  <script type="text/javascript" src="zingchart-angularjs.js"></script>
  <script type="text/javascript" src="dashboard.js"></script>
</head>


<body ng-app="mean.dashboard" layout="row" ng-cloak>

  <div class="container" layout="row" flex>
    <md-sidenav layout="column" class="md-whiteframe-10dp" md-is-locked-open='true'>
      <md-list>
        <md-list-item>
          <md-button>
            Dashboard
          </md-button>
        </md-list-item>
      </md-list>
    </md-sidenav>
    <md-content id="content" flex>
      <ng-view>
        <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
      </ng-view>
    </md-content>
  </div>
</body>

</html>

Original Q&A

There are 1 best solutions below

luisenrike On 10 June 2017 at 17:42 BEST ANSWER

In your index.html you need to include the zingchart-angularjs script before the dashboard.js one;

Also, I don't see the angular-material scripts in your index.html for ngMaterial:

I added this to index.html and it works perfect:

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="angular-aria.js"></script>
<script type="text/javascript" src="angular-material.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script type="text/javascript" src="dashboard.js"></script>

https://github.com/angular/material

AngularJS failed to instantiate zingchart module

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in DEPENDENCY-INJECTION

Related Questions in MEAN.IO

Trending Questions

Popular # Hahtags

Popular Questions