krishnakumar krishnakumar - 4 months ago 59
AngularJS Question

Can't initialize ngRoute,ngMaterial, getting Angular Js Uncaught Error: [$injector:modulerr]

I am having an issue with Angular JS receiving an error : Uncaught Error: [$injector:modulerr]. I couldn't initialize ngRoute and ngMaterial. My app.js file looks like,



var myApp = angular.module("myApp", ['ngRoute','ngMaterial']);




In view I include,



<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'></script>
<script src="js/app.js"></script>




Answer

materialize and ngMaterial are two different libraries, you need to refer to the angular-material references.

refer in the following order

 <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"> 
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
       <script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
       <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
 </script>

Here is the working Plunker