Nach minification angularjs Datei mit Schluck bekommen Unbekannter Anbieter: t Fehler?

Question

ich diesen Fehler

main-d2a9731a79.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:unpr] Unknown provider: t 

Unten bin immer mein Code in angularjs. Es hat funktioniert, bevor es verkleinerte. Einmal minimiert, begann es den obigen Fehler zu geben.

app.config(function ($routeProvider) { 
    $routeProvider 
    // route for the home page 
    .when('/', { 
     templateUrl: site_url + '/inbox/', 
     controller: 'inboxController' 
    }); 
}); 
app.controller('inboxController',['$scope', '$http', function ($scope, $http) { 
    console.log('tesing'); 
}]); 

Answer 1

Das Problem ist, dass, wenn app.config(function ($routeProvider) { ... }); um so etwas wie app.config(function (t) { ... }); Angular der Dependency Injection-Mechanismus nicht in der Lage minimiert wird ist die Abhängigkeiten korrekt zu identifizieren. Deshalb hat es Unknown provider: t Fehler geworfen.

Sie sollten immer Verwässerungssafe Syntax verwenden, um diese Art von Fehlern zu vermeiden. Eine Möglichkeit, dies zu tun ist: app.config(['$routeProvider', function ($routeProvider) { ... }]);. Sie können mehr darüber hier lesen: A Note on Minification.

Answer 2

Wenn Sie Ihren Code minimieren, werden Variablen und Parameter in so wenige Zeichen wie möglich umbenannt - dies ist eine der Möglichkeiten, die Dateigröße so stark zu reduzieren. Es hat jedoch den Nebeneffekt, die Angular-Abhängigkeitsinjektion zu unterbrechen, wenn Sie die einfache Syntax verwenden, da es die Parameternamen nicht mehr lesen kann, um zu bestimmen, was injiziert werden soll.

sind Ihre Optionen entweder die Array-Syntax zu verwenden, zu injizieren, wie Sie in Ihrem Controller getan haben:

app.config(['$routeProvider', function ($routeProvider) { 
      $routeProvider 
      // route for the home page 
      .when('/', { 
       templateUrl: site_url + '/inbox/', 
       controller: 'inboxController' 
      }); 
}]); 
app.controller('inboxController',['$scope', '$http', function ($scope, $http) { 
      console.log('tesing'); 
}]); 

Oder Sie ein Tool wie ngAnnotate in Ihrem Build-Prozess verwenden können, was die einfache umwandeln Syntax zu einer, die automatisch mit Verkleinerung arbeitet. Ich empfehle persönlich die letztere Option, da ich finde, dass die Array-Syntax viel weniger lesbar/einfach zu pflegen ist.

Es gibt viele weitere Informationen zu diesem Thema in der Angular developer guide.

Answer 3

Stellen Sie sicher, dass Sie ngRoute auch in Ihrem Hauptmodul verwenden, auf Minification strings wird nicht geändert.

Verwendung ngRoute in Ihrer Anwendung als Abhängigkeit

var app = angular.module('app',['ngRoute']); 

config:

app.config(appConfig); 

    //inject dependencies for your config constructor function 
    appConfig.$inject = ["$routeProvider"]; 

    //constructor:appConfig 
    function appConfig($routeProvider){ 

    } 

u auch Array-Version Abhängigkeiten zu injizieren

app.config(['$routeProvider', function ($routeProvider) {