"Provider sconosciuto: aProvider <- a" Come trovo il provider originale?

Quando sto caricando la versione minimizzata (tramite UglifyJS) della mia applicazione AngularJS, ottengo il seguente errore nella console:

Unknown provider: aProvider <- a

Ora, mi rendo conto che ciò è dovuto alla modifica del nome della variabile. La versione sbrogliata funziona bene. Comunque, io non voglio fare uso del nome storpiatura variabili, in quanto riduce drasticamente le dimensioni del nostro file di output JS.

Per questo motivo, stiamo usando ngmin nel nostro processo di compilazione, ma non sembra risolvere questo problema, anche se ci è servito bene in passato.

Quindi, per eseguire il debug di questo problema, ho abilitato le mappe sorgente nella nostra brutta attività grugnita. Essi sono generati bene e Chrome fa caricare le mappe dal server. Tuttavia, ricevo ancora lo stesso messaggio di errore inutile, anche se avevo l'impressione che ora dovrei vedere il nome originale del provider.

Come faccio a far sì che Chrome utilizzi le mappe di origine per dirmi quale provider è il problema qui o, in alternativa, come posso trovare il provider in un altro modo?

Mi piacerebbe ancora sapere come avrei potuto trovare il posto nel nostro codice sorgente che ha causato questo problema, ma da allora sono stato in grado di trovare il problema manualmente.

C'era una funzione del controller dichiarata nell'ambito globale, invece di utilizzare una .controller()chiamata sul modulo dell'applicazione.

Quindi c'era qualcosa del genere:

function SomeController( $scope, i18n ) { /* ... */ }

Funziona benissimo per AngularJS, ma per farlo funzionare correttamente con il mangling, ho dovuto cambiarlo in:

var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );

Dopo ulteriori test, ho effettivamente trovato istanze di più controller che hanno anche causato problemi. Ecco come ho trovato manualmente l'origine di tutti loro :

Prima di tutto, considero piuttosto importante abilitare l'abbellimento dell'output nelle opzioni uglify. Per il nostro compito grugnito ciò significava:

options : {
    beautify : true,
    mangle   : true
}

Ho quindi aperto il sito Web del progetto in Chrome, con i DevTools aperti. Il che si traduce in un errore come quello seguente che viene registrato:

Il metodo nel tracciamento delle chiamate a cui siamo interessati è quello che ho contrassegnato con una freccia. Questo è providerInjectordentroinjector.js . Dovrai posizionare un punto di interruzione in cui genera un'eccezione:

Quando ora riesegui l'applicazione, il punto di interruzione verrà raggiunto e potrai saltare lo stack di chiamate. Ci sarà una chiamata da invokeininjector.js , riconoscibile dalla stringa "token di iniezione errato":

Il localsparametro (modificato dnel mio codice) dà un'idea abbastanza buona su quale oggetto nella tua sorgente è il problema:

Un rapido grepsulla nostra fonte trova molti casi di modalInstance, ma da lì, è stato facile trovare questo punto nella fonte:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};

Che deve essere modificato in:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];

Nel caso in cui la variabile non contenga informazioni utili, puoi anche saltare più in alto nello stack e dovresti premere una chiamata a invokecui dovresti avere suggerimenti aggiuntivi:

Evita che ciò accada di nuovo

Ora che si spera che abbia trovato il problema, sento di dover menzionare come evitare al meglio che ciò accada di nuovo in futuro.

Ovviamente, potresti semplicemente usare l' annotazione dell'array inline ovunque, o l' $injectannotazione della proprietà (a seconda delle tue preferenze) e cercare semplicemente di non dimenticartene in futuro. Se lo fai, assicurati di abilitare la modalità di inserimento delle dipendenze rigorose , per rilevare errori come questo in anticipo.

Attento! Nel caso tu stia usando Angular Batarang, StrictDI potrebbe non funzionare per te, poiché Angular Batarang inietta codice non annotato nel tuo (cattivo Batarang!).

Oppure puoi lasciare che ng-annotate se ne occupi. Consiglio vivamente di farlo, poiché rimuove molti potenziali errori in quest'area, come:

• Annotazione DI mancante
• Annotazione DI incompleta
• Annotazione DI nell'ordine sbagliato

Mantenere aggiornate le annotazioni è semplicemente un rompicoglioni e non dovresti farlo se può essere fatto automaticamente. ng-annotate fa esattamente questo.

Dovrebbe integrarsi perfettamente nel tuo processo di compilazione con grunt-ng-annotate e gulp-ng-annotate .

Il resoconto di Oliver Salzburg è stato fantastico. Votato.

Suggerimento per chiunque possa avere questo errore. Il mio è stato semplicemente causato dal dimenticare di passare un array per un controller direttiva:

MALE

return {
    restrict: "E",
    scope: {                
    },
    controller: ExampleDirectiveController,
    templateUrl: "template/url/here.html"
};

BENE

return {
    restrict: "E",
    scope: {                
    },
    controller: ["$scope", ExampleDirectiveController],
    templateUrl: "template/url/here.html"
};

usa ng-strict-di con ng-app

Se stai usando angolare 1.3 si può risparmiare un mondo di dolore utilizzando ngStrictDi direttiva con ngApp:

<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di>

Ora - pre-minificazione - tutto ciò che non usa annotazioni farà saltare in aria la tua console e puoi vedere il fottuto nome senza cercare tra le tracce di stack alterate.

Secondo i documenti:

l'applicazione non riuscirà a richiamare le funzioni che non utilizzano l'annotazione di funzione esplicita (e quindi non sono adatte per la minificazione)

Un avvertimento , rileva solo che ci sono annotazioni, non che le annotazioni siano complete.

Senso:

['ThingOne', function(ThingA, ThingB) { … }]

Non rileverà che ThingB non fa parte dell'annotazione.

Il merito di questo suggerimento va alle persone ng-annotate , che è consigliato rispetto all'ormai deprecato ngMin.

Per minimizzare angolare, tutto ciò che devi fare è cambiare la tua dichiarazione nella modalità "dichiarazione" array "", ad esempio:

A partire dal:

var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );

Per

var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);

Come dichiarare i servizi di fabbrica?

demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
    return {
          //some object
    };
}]);

Ho appena avuto lo stesso problema e l'ho risolto semplicemente sostituendo ngmin (ora deprecato) con ng-annotate per la mia attività di compilazione grugnita.

Sembra che anche yeoman angular sia stato aggiornato per utilizzare ng-annotate a partire da questo commit: https://github.com/yeoman/generator-angular/commit/3eea4cbeb010eeaaf797c17604b4a3ab5371eccb

Tuttavia, se stai usando una versione precedente di yeoman angular come me, sostituisci semplicemente ng-min con ng-annotate nel tuo package.json:

-    "grunt-ngmin": "^0.0.3",
+    "grunt-ng-annotate": "^0.3.0",

eseguire npm install(quindi facoltativamente npm prune) e seguire le modifiche nel commit da modificare Gruntfile.js.

per sapere qual era il nome originale della variabile puoi cambiare il modo in cui uglify manipola le variabili:

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;
    [...]
  }
};

e ora l'errore è molto più evidente

Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider
at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20)

MODIFICARE

Così ovvio ora ...

Gruntfile.js

uglify: {
  example: {
    options: {
      beautify: true,
      mangle: true
    },
    [...]
  },
  [...]
}

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

var numberOfVariables = 1;
SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;
    [...]
  }
};

ora ogni variabile è alterata in un valore univoco che contiene anche l'originale ... basta aprire il javascript minimizzato e cercare "a_orig_ $ stateProvider_91212" o qualsiasi altra cosa ... lo vedrai nel suo contesto originale ...

non potrebbe essere più facile ...

Inoltre, non dimenticare la resolveproprietà del percorso. Deve anche essere definito come array:

$routeProvider.when('/foo', {
    resolve: {
        bar: ['myService1', function(myService1) {
            return myService1.getThis();
        }],
        baz: ['myService2', function(myService2) {
            return myService2.getThat();
        }]
    }
});

Con generatore-gulp-angolare:

   /** @ngInject */
    function SomeController($scope, myCoolService) {

}

Scrivi / ** @ngInject * / prima di ogni controller, servizio, direttiva.

Una soluzione rapida e sporca per questo se non si richiede a Uglify di manipolare / accorciare i nomi delle variabili è impostare mangle = false nel file Grunt

    uglify: {
        compile: {
            options: {
                mangle   : false,
                ...
            },
        }
    }