Question

我正在尝试使用角度组件创建动态templateUrls。但我得到这个错误：

Error: [$injector:unpr] Unknown provider: eProvider <- e

angular
    .module('myApp')
    .component('fieldComponent', {
        templateUrl: function ($element, $attrs) {
           return $attrs.templateUrl || 'some/path/default.html'
        },
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            {path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true}
        ]
    });

随着文件缩小，其投掷错误如上所述。那么＆amp;如何注入这些依赖项？

Answer 1

我猜你在fieldComponentController中的DI被缩小了。当代码被缩小时，您的依赖关系会将其名称更改为“e”之类的内容，Angular不知道如何处理。

解决这个问题的一种方法是使用ng-annotate（https://github.com/olov/ng-annotate）以缩小安全的方式重写这些变量名称。

如果你使用像Webpack这样的构建工具进行捆绑和缩小，你可以简单地将ngAnnotatePlugin添加到你的配置中，并在控制器定义的顶部包含字符串'ngInject'

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout)        
{
"ngInject";
...
});

ES2015版本：

export class MyCtrl {
    constructor($scope, $timeout){
        'ngInject';
    }
}

Answer 2

我可以通过@Matt Richards建议在顶部添加/ @ngInject /来实现。

/*@ngInject*/
angular
    .module('myApp')
    .component('fieldComponent', {
        templateUrl: function ($element, $attrs) {
           return $attrs.templateUrl || 'some/path/default.html'
        },
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            {path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true}
        ]
    });

但是，最后我最终得到了ng-include，而不是采用动态模板方法，并节省了我的单元测试时间。

Angular.js组件动态templateURL

2 个答案: