Угловая Материал "[$ Инжектор: unpr] Неизвестный поставщик" ошибки при попытке включить ngMaterial $ mdToast, $ анимировать

Question

Я пытаюсь использовать ngMaterial в этом приложении:

Bower.json файла:

{ 
    "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" 
    } 
} 

Config JS файл:

конфигурации

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' 
     ], 

App:

// 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 
    }; 
})(); 

И потом:

// Use Application configuration module to register a new module 
ApplicationConfiguration.registerModule('core'); 
ApplicationConfiguration.registerModule('core.admin', ['core']); 
ApplicationConfiguration.registerModule('core.admin.routes', ['ui.router']); 

Это терпит неудачу, когда я пытаюсь ссылаться ngMaterial, $ mdToast или $ анимировать в модуле, как показано ниже. Без ссылок ниже нет ошибок в html md-ссылках, они просто не работают должным образом (они будут отображаться, но без функциональности «материал»).

Контроллер JS файл:

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 

Выдает ошибку:

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"> 

Answer 1

ngMaterial это имя модуля, он не может быть введен в контроллер. Вы должны удалить его из следующих строк:

angular.module('core').controller('HeaderController', 
    ['$scope', '$state', 'ngMaterial', 'Authentication', 'Menus', 
    function ($scope, $state, Authentication, Menus) { 

Вместо ngMaterial должны быть добавлены в зависимости модуля вашего приложения:

angular.module('appName', [..., 'ngMaterial', ...]) 

Затем вы можете придать угловой компоненты материала, как $mdToast, в вашем контроллере.