CODEWITHSUNDEEP
javascriptangularjsangular-material
cheesydoritosandkale
cheesydoritosandkale

Reputation: 609

Failed to > instantiate module ngMaterial due to: Error: [$injector:nomod]

So I used Yeoman to create an angular application, using the generator fountain-angular1 and I am trying to use angular materials with it. I've seen other post about getting this error from ngMaterial for different reasons, but none of the resolutions seemed to work for me.

enter image description here

I have installed the dependencies, and put them in the specific order as suggested. I am pretty new to Angular so I am guessing that I am probably missing something basic. I spent so much time trying to get this to work, and I am not sure what I am doing wrong. Any help would be appreciated!

index.js file:

var angular = require('angular');

var techsModule = require('./app/techs/index');
require('angular-ui-router');
var routesConfig = require('./routes');

var main = require('./app/main');
var header = require('./app/header');
var title = require('./app/title');
var footer = require('./app/footer');

require('./index.scss');

angular
  .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate', 'ngAria'])
  .config(routesConfig)
  .component('app', main)
  .component('fountainHeader', header)
  .component('fountainTitle', title)
  .component('fountainFooter', footer);

index.html

<!doctype html>
<html>

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>FountainJS</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
</head>

<body ng-app="app">
  <ui-view></ui-view>
  <script src="/node_modules/angular/angular.js" type="text/javascript"></script>
  <script src="/node_modules/angular-aria/angular-aria.js"></script>
  <script src="/node_modules/angular-animate/angular-animate.js"></script>
  <script src="/node_modules/angular-material/angular-material.js"></script>
  <script src="index.js"></script>

</body>

</html>

package.json

{
  "dependencies": {
    "angular": "^1.5.9",
    "angular-animate": "^1.5.0",
    "angular-aria": "^1.5.0",
    "angular-filter": "^0.5.15",
    "angular-material": "^1.1.3",
    "angular-moment": "^1.0.1",
    "angular-ui-router": "~0.2.15",
    "babel-core": "^6.0.1",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/angular-mocks": "^1.5.5",
    "@types/jquery": "^2.0.33",
    "angular-mocks": "^1.5.0-beta.2",
    "gulp-angular-templatecache": "^1.8.0",
    "@types/angular-ui-router": "^1.1.34",
    "del": "^2.0.2",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-filter": "^4.0.0",
    "gulp-util": "^3.0.7",
    "gulp-angular-filesort": "^1.1.1",
    "gulp-htmlmin": "^1.3.0",
    "gulp-insert": "^0.5.0",
    "gulp-ng-annotate": "^1.1.0",
    "gulp-sass": "^2.1.1",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "jasmine": "^2.4.1",
    "es6-shim": "^0.35.0",
    "karma-angular-filesort": "^1.0.0",
    "karma-ng-html2js-preprocessor": "^0.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-phantomjs-shim": "^1.1.2",
    "phantomjs-prebuilt": "^2.1.6",
    "karma-webpack": "^1.7.0",
    "webpack": "2.1.0-beta.20",
    "html-webpack-plugin": "^2.9.0",
    "style-loader": "^0.13.0",
    "css-loader": "^0.23.1",
    "postcss-loader": "^0.8.0",
    "autoprefixer": "^6.2.2",
    "json-loader": "^0.5.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "webpack-fail-plugin": "^1.0.5",
    "ng-annotate-loader": "^0.0.10",
    "html-loader": "^0.4.3",
    "sass-loader": "^3.1.2",
    "node-sass": "^3.4.2",
    "eslint": "^3.2.2",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-plugin-angular": "^1.3.0",
    "eslint-loader": "^1.3.0",
    "babel-loader": "^6.2.0"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "globals": {
      "expect": true
    },
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-space"
    ]
  }
}

File path: enter image description here

Upvotes: 0

Views: 1849

Answers (2)

cheesydoritosandkale
cheesydoritosandkale

Reputation: 609

Thanks for the comments and variety of solutions! I actually found out what my problem was. Since I had already installed it with npm, I just needed to require angular-materials in my index.js file, right under where it requires Angular. It needed to look like this:

var angular = require('angular');
require('angular-material');

With that, I don't need to use these references at all:

<script src="/node_modules/angular/angular.js" type="text/javascript"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>

and then add it to the module:

angular
  .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate'])
  .config(routesConfig)
  .component('app', main)

Hope this helps anyone else having this issue. Really simple fix!

Upvotes: 1

jperelli
jperelli

Reputation: 7207

I don't think you can access modules from node_modules like this

<script src="/node_modules/angular/angular.js" type="text/javascript"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>

because you have this structure

node_modules
app/index.html

so src="/node_modules/..." in your html, references to app/node_modules... which does not exist.

you could try changing src="/node_modules/whatever" to src="../node_modules/whatever which makes sense, but it depends on your server, that usually does not allow parent references beyond server root folder.

For a permanent solution, you need to reference your files that are inside node_modules from app/something, you can do this by either making a link or copying files. Gulp (that is being used in fountain-angular1) should have a method to do this. Try running gulp build and see if your angular modules are being copied into some directory inside app/

Another option is for you to do bower install angular-aria angular-animate angular-material and then reference files from index to ../bower_components/angular-whatever/angular-whatever.js

Upvotes: 0

Related Questions