0

angular コンポーネントを使用して動的な 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}
        ]
    });

ファイルが縮小されると、上記のようにエラーがスローされます。では、この依存関係をどこにどのように注入するのですか?

4

2 に答える 2

1

fieldComponentController の DI が縮小によって壊れていると推測しています。コードが縮小されると、依存関係の名前が「e」などに変更されますが、Angular はこれを処理する方法を知りません。

これに対処する 1 つの方法は、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';
    }
}
于 2016-09-13T14:05:49.000 に答える
0

@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には動的テンプレート アプローチに移行することになり、ユニット テスト ケースをカバーする時間を節約できました。

于 2016-09-13T17:23:41.897 に答える