Angular.jsのコンポーネントdynamic templateURL

Question

角度コンポーネントを含む動的なtemplateUrlを作成しようとしています。上記のように縮小さばかりのファイル、その投げエラーとして

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} 
     ] 
    }); 

：しかし、私はこのエラーを取得します。だから&私はこの依存関係を注入する方法は？

Answer 1

私は@Mattリチャーズにより示唆されるように先頭に/ @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になってしまった、とユニットテストケースをカバーする私の時間を救いました。

Answer 2

私は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'; 
    } 
}