Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0

This is very frustrating, Im using a mean.js yeoman generated application and can't get to seem to get angular-material up and running. I read another stackoverflow question about the issue Angularjs with material design Failed to instantiate module ngMaterial. So I updated my bower.json file and ran a bower update and bower install. It still doesnt work. During the bower update, bower gave me this message Unable to find a suitable version for angular, please choose one:, but I always chose an Angular version 1.3.0 or greater.
Heres a copy of my bower.json:

{
  "name": "colign",
  "version": "0.0.1",
  "description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js",
  "dependencies": {
    "bootstrap": "~3",
    "angular": "~1.3",
    "angular-resource": "~1.3",
    "angular-mocks": "~1.3",
    "angular-bootstrap": "~0.11.2",
    "angular-ui-utils": "~0.1.1",
    "angular-ui-router": "~0.2.11",
    "angular-material": "~0.10.0"
  }
}

Heres the console error message: Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to: Error: [$injector:nomod] Module 'ngMaterial' 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.

Angular config.js file:

'use strict';

// Init the application configuration module for AngularJS application
var ApplicationConfiguration = (function() {
    // Init module configuration options
    var applicationModuleName = 'colign';
    var applicationModuleVendorDependencies = ['ngResource', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngMaterial'];

    // Add a new vertical module
    var registerModule = function(moduleName, dependencies) {
        // Create angular module
        angular.module(moduleName, dependencies || []);

        // Add the module to the AngularJS configuration file
        angular.module(applicationModuleName).requires.push(moduleName);
    };

    return {
        applicationModuleName: applicationModuleName,
        applicationModuleVendorDependencies: applicationModuleVendorDependencies,
        registerModule: registerModule
    };
})();

Thanks in advance for any help!

like image 266
Daniel Kobe Avatar asked Jun 24 '15 17:06

Daniel Kobe


1 Answers

Angular material, ngMaterial, has dependency on ngAria and ngAnimate as well. You would need to load them.

angular.module('ngMaterial', ["ng","ngAnimate","ngAria", ...other material sub modules

You could download it from angular aria and angular animate. Use the correct version of these based on your angular version.

Also just adding the scripts in the project is not enough you need to load them in your html as well. Also load them before ng-material script.

like image 69
PSL Avatar answered Oct 22 '22 00:10

PSL