"Errore non rilevato: [$ injector: unpr]" con angolare dopo la distribuzione

Ho un'applicazione Angular abbastanza semplice che funziona perfettamente sulla mia macchina di sviluppo, ma non riesce con questo messaggio di errore (nella console del browser) dopo averlo distribuito:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20%24http%20%3C-%20%24compile

Nessun altro messaggio oltre a quello. Succede quando la pagina viene caricata per la prima volta.

Sto eseguendo ASP.NET MVC5, Angular 1.2RC3 e sto eseguendo il push in Azure tramite git.

Google non ha trovato nulla di interessante.

Eventuali suggerimenti?

MODIFICARE:

Sto usando TypeScript e definisco le mie dipendenze con la $injectvariabile, ad esempio:

export class DashboardCtrl {

    public static $inject = [
        '$scope',
        '$location',
        'dashboardStorage'
    ];

    constructor(
        private $scope: IDashboardScope,
        private $location: ng.ILocationService,
        private storage: IDashboardStorage) {
    }
}

Credo che dovrebbe (o è inteso a) aggirare i problemi di ridenominazione delle variabili locali che si verificano durante la minificazione e che possono causare questo errore.

Detto questo, ha chiaramente qualcosa a che fare con il processo di minimizzazione, poiché quando ho impostato la BundleTable.EnableOptimizations = truemia macchina di sviluppo, posso riprodurlo.

Se segui il tuo collegamento, ti dice che l'errore deriva dal fatto che $ injector non è in grado di risolvere le tue dipendenze. Questo è un problema comune con angular quando il javascript viene minimizzato / sminuito / qualunque cosa tu stia facendo per la produzione.

Il problema è quando si dispone, ad esempio, di un controller;

angular.module("MyApp").controller("MyCtrl", function($scope, $q) {
  // your code
})

La minificazione cambia $scopee $qin variabili casuali che non dicono ad angular cosa iniettare. La soluzione è dichiarare le tue dipendenze in questo modo:

angular.module("MyApp")
  .controller("MyCtrl", ["$scope", "$q", function($scope, $q) {
  // your code
}])

Questo dovrebbe risolvere il tuo problema.

Tanto per ripetere, tutto ciò che ho detto è al link che ti fornisce il messaggio di errore.

Mi sono imbattuto nello stesso problema io stesso, ma le mie definizioni del controller sembravano leggermente diverse da quelle sopra. Per i controller definiti in questo modo:

function MyController($scope, $http) {
    // ...
}

Basta aggiungere una riga dopo la dichiarazione che indica quali oggetti iniettare quando viene istanziato il controller:

function MyController($scope, $http) {
    // ...
}
MyController.$inject = ['$scope', '$http'];

Questo lo rende sicuro per la minificazione.

Questo problema si verifica quando il controller o la direttiva non sono specificati come una matrice di dipendenze e funzioni. Per esempio

angular.module("appName").directive('directiveName', function () {
    return {
        restrict: 'AE',
        templateUrl: 'calender.html',
        controller: function ($scope) {
            $scope.selectThisOption = function () {
                // some code
            };
        }
    };
});

Quando minificato Il '$ scope' passato alla funzione del controller è sostituito da un nome di variabile di una sola lettera. Ciò renderà angolare all'oscuro della dipendenza. Per evitare ciò, passare il nome della dipendenza insieme alla funzione come array.

angular.module("appName").directive('directiveName', function () {
    return {
        restrict: 'AE',
        templateUrl: 'calender.html'
        controller: ['$scope', function ($scope) {
            $scope.selectThisOption = function () {
                // some code
            };
        }]
    };
});

Se hai file separati per app angolari \ risorse \ direttive e altre cose, puoi semplicemente disabilitare la minificazione del tuo bundle di app angolari in questo modo (usa new Bundle () invece di ScriptBundle () nel tuo file di configurazione del bundle):

bundles.Add(
new Bundle("~/bundles/angular/SomeBundleName").Include(
               "~/Content/js/angular/Pages/Web/MainPage/angularApi.js",
               "~/Content/js/angular/Pages/Web/MainPage/angularApp.js",
               "~/Content/js/angular/Pages/Web/MainPage/angularCtrl.js"));

E l'app angolare apparirà in bundle non modificata.

Se hai file separati per app angolari \ risorse \ direttive e altre cose, puoi semplicemente disabilitare la minificazione del tuo bundle di app angolari in questo modo (usa new Bundle () invece di ScriptBundle () nel tuo file di configurazione del bundle):

Aggiungere i servizi $ http, $ scope nella funzione del controller, a volte se mancano si verificano questi errori.

Ho avuto lo stesso problema ma il problema era diverso, stavo cercando di creare un servizio e passarvi $ scope come parametro.
Questo è un altro modo per ottenere questo errore come dice la documentazione di quel collegamento:

Il tentativo di inserire un oggetto di ambito in qualsiasi cosa che non sia un controller o una direttiva, ad esempio un servizio, genererà anche un provider sconosciuto: $ scopeProvider <- $ scope error. Ciò potrebbe accadere se si registra erroneamente un controller come servizio, ad esempio:

angular.module('myModule', [])
       .service('MyController', ['$scope', function($scope) {
        // This controller throws an unknown provider error because
        // a scope object cannot be injected into a service.
}]);