कोणीय सामग्री "[$ इंजेक्टर: 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" 
    } 
} 

कॉन्फ़िग जे एस फ़ाइल:

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

अनुप्रयोग विन्यास:

// 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 कोशिश नीचे की तरह मॉड्यूल में चेतन। नीचे दिए गए संदर्भों के बिना एचटीएमएल एमडी संदर्भों में कोई त्रुटि नहीं है, वे ठीक से काम नहीं करते हैं (वे प्रदर्शित होंगे लेकिन बिना 'सामग्री' कार्यक्षमता के)।

नियंत्रक जे एस फ़ाइल:

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 की तरह, आप नियंत्रक में।