Angular.js Komponenten dynamische VorlageURL

Question

Ich versuche, dynamische TemplateUrls mit eckigen Komponente zu erstellen. Aber ich bekomme diese Fehlermeldung wie:

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

Als Dateien minimierte bekommen, wie oben seine werfen Fehler. Also wo & wie ich diese Abhängigkeiten injizieren?

Answer 1

konnte ich es tun durch das Hinzufügen/@ngInject/oben wie von @ Matt Richards vorgeschlagen.

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

Aber schließlich landete ich mit ng-include eher in Richtung des dynamischen Vorlage Ansatz gehen, und sparte meine Zeiteinheit Testfall abdeckt.

Answer 2

Ich vermute, dass Ihre DI in der FieldComponentController durch Minification gebrochen wird. Wenn der Code minimiert wird, werden die Namen der Abhängigkeiten in Dinge wie "e" geändert, mit denen Angular nicht umgehen kann.

Eine Möglichkeit, dies zu umgehen, ist die Verwendung von ng-annotate (https://github.com/olov/ng-annotate), um diese Variablennamen in einer verfälschungssicheren Weise neu zu schreiben.

Wenn Sie ein Build-Tool wie Webpack verwenden Ihre Bündelung und minification zu tun, können Sie einfach die ngAnnotatePlugin zu Ihrer Konfigurations hinzufügen und die Zeichenfolge ‚ngInject‘ am oberen Rand Ihrer Controller-Definition

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

ES2015 Version:

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