CODEWITHSUNDEEP
angularjsangular-ui-routerangularjs-material
anagha affinity
anagha affinity

Reputation: 273

Uncaught Error: [$injector:unpr] for ngMaterial

I am having issue with ngMaterial while including it in project then its showing error Uncaught Error: [$injector:unpr] My app.js file look like 

angular
        .module('app', ['ui.router','ngMaterial','objectTable'])
        .config(config)
        .run(run);

and in view, I have included files in this order

<!-- external scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- bower plugins -->
<script type="text/javascript" src="app-content/scripts/object-table.js"></script>

<!-- application scripts -->
<script src="app.js"></script>
<script src="app-services/user.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="home/index.controller.js"></script>
<script src="account/index.controller.js"></script>

Can anyone help me to solve this? I tried to change the order of files but still, the issue is same.

Upvotes: 0

Views: 2388

Answers (2)

Brian Hvarregaard
Brian Hvarregaard

Reputation: 4209

For posterity: I installed using Visual Studio and NuGET. I first installed my angularjs.core package (only the angular file). This was version 1.5.8. I then installed angular material afterwards. This was installed in version 1.1.3. What i didnt notice at first was that when iu installed angular material was that it included its own version of angular.

The point is - i was using my first installed "angularjs.core" in a way to high version (i think this was the problem). I then switched to using the angular version shipped with material NuGet package. Then then everything worked.

Upvotes: 0

nextt1
nextt1

Reputation: 3988

It should be like this.

   <!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

Import angular-animate and angular-aria before angular-material.

see this code. switch angular-animate import and see the difference.

http://codepen.io/next1/pen/NNRMeQ

Upvotes: 1

Related Questions