angular Error: $injector:modulerr Module Error

Question

I am trying to run one of Angular Materials examples but for the life of me I can't figure out why I'm getting this error.

The error I am getting is Error: $injector:modulerr Module Error

This is the error report I got: link

Any ideas what the issue could be? I practically copy-pasted this from their examples website.

Here is the code:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {

});

.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }

.buttondemoBasicUsage md-content {
  margin-right: 7px; }

.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }

.buttondemoBasicUsage .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <md-content>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
      <md-button class="md-icon-button md-primary" aria-label="Settings">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button class="md-icon-button md-accent" aria-label="Favorite">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <md-button href="http://google.com" title="Launch Google.com in new window" target="_blank" ng-disabled="true" aria-label="Google.com" class="md-icon-button launch">
        <md-icon md-font-icon="icon-home"></md-icon>
      </md-button>
      <div class="label">Icon Button</div>
    </section>
  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

Are all three of these modules, ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'] defined somewhere in one of the 8 files you're loading? — War10ck
– War10ck, Commented Jan 28, 2016 at 15:06

alexeiTruhin · Accepted Answer · 2016-03-18 14:06:44Z

30

Most probably you are missing svg icons

<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>

answered Mar 18, 2016 at 14:06

alexeiTruhin

4253 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chrismarx Over a year ago

I thought this file would be in the material-design-icons directory after installing with npm, but I don't see anything that matches. Is this file included somewhere else?

Mike · Accepted Answer · 2016-02-16 09:01:48Z

4

Change the module script to remove the reference to material.svgAssetsCache and the demo will run but without the final row of buttons - which reference "local" image resources.

If you grab a copy of the icons(bower install material-design-icons) and locate the relevant 24px .svg files and pop them in (say) /img/icons/ from the root of your web site (adjusting file names and path as required) then even this section will work just fine.

The demo is rather off-putting when you think about it as it is likely to be chosen as a first stab at trying things out yet it only works within the CodePen sand-tray.

edited Feb 16, 2016 at 9:01

answered Feb 15, 2016 at 18:06

Mike

4915 silver badges12 bronze badges

1 Comment

Mike Over a year ago

You can use this JavaScript library to draw the icons klarsys.github.io/angular-material-icons although you have to do some positioning to get them perfectly located within (say) a fab. This line: <ng-md-icon icon="android" style="fill: white; position: relative; top: 6px;" size="24" ></ng-md-icon> placed the icon in the "android" fab example.

CleanCoder · Accepted Answer · 2016-01-28 15:07:00Z

2

Did you reference the .js file related to your angular app? I can just see the external javascript dependencies but nothing related to your app - controller. Take care about the order you're importing it

answered Jan 28, 2016 at 15:07

CleanCoder

1211 silver badge2 bronze badges

3 Comments

Katie Over a year ago

What is the correct order of importing then? I copy pasted it from a working example on the angular website.

CleanCoder Over a year ago

Think about what needs what. Your app and controllers need angular framework then you have to put them after angular.js file

CleanCoder Over a year ago

E.g. If you put your module and your controllers in the file myapp.js, this file must be referenced after angular.js. <script src="angular.js"></script> <script src="myapp.js"></script>

Jacek Wojcik · Accepted Answer · 2016-03-12 20:42:58Z

-3

You need to add:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">

answered Mar 12, 2016 at 20:42

Jacek Wojcik

1,2734 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

angular Error: $injector:modulerr Module Error

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related