当“ng-strict-di”为真时定义一个“$mdThemingProvider”答案

【问题标题】：Define a '$mdThemingProvider' when 'ng-strict-di' is true当“ng-strict-di”为真时定义一个“$mdThemingProvider”
【发布时间】：2016-03-25 15:25:50
【问题描述】：

我已经从角度材料定义了一个调色板

$mdThemingProvider.definePalette('amazingPaletteName', {
    '50': 'ffebee',
    '100': 'ffcdd2',
    '200': 'ef9a9a',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',    // whether, by default, text         (contrast)
                                // on this palette should be dark or light
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
     '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
});



$mdThemingProvider.theme('custom2')
        .primaryPalette('amazingPaletteName');

并在我的主 index.html 中定义 ng-strict-di

<!DOCTYPE html>
<html ng-app="exampleApp" ng-strict-di>

但是我有这个错误

Uncaught Error: [$injector:modulerr] Failed to instantiate module appModule due to:
Error: [$injector:strictdi] function($mdThemingProvider) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.8/$injector/strictdi?p0=function(%24mdThemingProvider)
    at http://localhost:4000/bower_components/angular/angular.js:68:12
    at Function.annotate [as $$annotate] (http://localhost:4000/bower_components/angular/angular.js:3792:17)
    at Object.invoke (http://localhost:4000/bower_components/angular/angular.js:4501:36)
    at runInvokeQueue (http://localhost:4000/bower_components/angular/angular.js:4429:35)
    at http://localhost:4000/bower_components/angular/angular.js:4437:11
    at forEach (http://localhost:4000/bower_components/angular/angular.js:340:20)
    at loadModules (http://localhost:4000/bower_components/angular/angular.js:4419:5)
    at createInjector (http://localhost:4000/bower_components/angular/angular.js:4344:11)
    at doBootstrap (http://localhost:4000/bower_components/angular/angular.js:1676:20)
    at Object.angular.resumeBootstrap (http://localhost:4000/bower_components/angular/angular.js:1705:12)
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=appModule&p1=Error%3A%…F%2Flocalhost%3A4000%2Fbower_components%2Fangular%2Fangular.js%3A1705%3A12)

将front放在ng-strict-di中并定义调色板有问题吗？

谢谢！

---- 编辑----

问题是使用数组注释。

.config(['$mdThemingProvider',function($mdThemingProvider){
    $mdThemingProvider.definePalette('module',{
        '50': '90ad53',
        '100': 'dddddd',
        '200': '90ad53',
         ...
        'contrastDefaultColor': 'dddddd',    // whether, by default, text (contrast)
                                            // on this palette should be dark or light
        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
            '200', '300', '400', 'A100'],
        'contrastLightColors': undefined
    });
    $mdThemingProvider.theme('default')
        .primaryPalette('module');

}]);

感谢 Pankaj Parkar！

【问题讨论】：

你用过.config(['$mdThemingProvider', function($mdThemingProvider) { .... }])这样的数组内联DI注解吗？
This GitHub issue 听起来很相似，你检查了吗？可能需要自己构建部件。

标签： javascript html angularjs angular-material

【解决方案1】：

来自documentation：

当应用程序在启用 strict-di 模式的情况下尝试调用未显式注释的函数或提供程序时，会发生此错误。

发生错误是因为'$mdThemingProvider' 在配置函数中使用之前未被列为依赖项。

要解决此问题，您需要将 '$mdThemingProvider' 定义为依赖项：

.config(['$mdThemingProvider',function($mdThemingProvider){
    $mdThemingProvider.definePalette('module',{
         ...
        // configuration goes here
    });

    $mdThemingProvider.theme('default')
        .primaryPalette('module');

}]);

【讨论】：