I am trying to use ngMaterial in this application:
Bower.json file:
{ "name": "x", "version": "0.0.0", "description": "x", "dependencies": { "bootstrap": "~3", "angular": "~1.4.7", "angular-resource": "~1.4.7", "angular-animate": "~1.4.7", "angular-mocks": "~1.4.7", "angular-bootstrap": "~0.13", "angular-ui-utils": "bower", "angular-ui-router": "~0.2", "angular-file-upload": "1.1.5", "angular-material": "~0.11.4" }, "resolutions": { "angular": ">= 1.0.2" } }
JS file configuration:
module.exports = { client: { lib: { css: [ 'public/lib/bootstrap/dist/css/bootstrap.css', 'public/lib/bootstrap/dist/css/bootstrap-theme.css', 'public/lib/bootstrap/dist/css/angular-material.css' ], js: [ 'public/lib/angular/angular.js', 'public/lib/angular-aria/angular-aria.js', 'public/lib/angular-resource/angular-resource.js', 'public/lib/angular-animate/angular-animate.js', 'public/lib/angular-material/angular-material.js', 'public/lib/angular-ui-router/release/angular-ui-router.js', 'public/lib/angular-ui-utils/ui-utils.js', 'public/lib/angular-bootstrap/ui-bootstrap-tpls.js', 'public/lib/angular-file-upload/angular-file-upload.js' ],
Application Configuration:
// Init the application configuration module for AngularJS application var ApplicationConfiguration = (function () { // Init module configuration options var applicationModuleName = 'x'; var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', '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 }; })();
And then:
// Use Application configuration module to register a new module ApplicationConfiguration.registerModule('core'); ApplicationConfiguration.registerModule('core.admin', ['core']); ApplicationConfiguration.registerModule('core.admin.routes', ['ui.router']);
It does not work when I try to reference ngMaterial, $ mdToast or $ animate in a module, as shown below. Without the links below, there are no errors in the html md links, they simply do not work properly (they will be displayed, but without the "material" functionality).
Controller JS File:
angular.module('core').controller('HeaderController', ['$scope', '$state', 'ngMaterial', 'Authentication', 'Menus', function ($scope, $state, Authentication, Menus) { // Add '$mdToast', '$animate', $mdToast, $animate and the same error results
Gives an error message:
Error: [$injector:unpr] Unknown provider: ngMaterialProvider <- ngMaterial <- HeaderController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=ngMaterialProvider%20%3C-%20ngMaterial%20%3C-%20HeaderController at http://localhost:3000/lib/angular/angular.js:68:12 at http://localhost:3000/lib/angular/angular.js:4289:19 at Object.getService [as get] (http://localhost:3000/lib/angular/angular.js:4437:39) at http://localhost:3000/lib/angular/angular.js:4294:45 at getService (http://localhost:3000/lib/angular/angular.js:4437:39) at Object.invoke (http://localhost:3000/lib/angular/angular.js:4469:13) at extend.instance (http://localhost:3000/lib/angular/angular.js:9136:34) at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:8248:36) at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:7680:13) at publicLinkFn (http://localhost:3000/lib/angular/angular.js:7555:30) <header data-ng-include="'/modules/core/views/header.client.view.html'" class="ng-scope" data-ng-animate="1">