"Erreur non interceptée: [$ injector: un]" avec angulaire après le déploiement

J'ai une application Angular assez simple qui fonctionne très bien sur ma machine de développement, mais qui échoue avec ce message d'erreur (dans la console du navigateur) après son déploiement:

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

Aucun autre message à part ça. Cela se produit lorsque la page se charge pour la première fois.

J'exécute ASP.NET MVC5, Angular 1.2RC3 et je pousse vers Azure via git.

Google n'a rien trouvé d'intéressant.

Aucune suggestion?

ÉDITER:

J'utilise TypeScript et je définis mes dépendances avec la $injectvariable, par exemple:

export class DashboardCtrl {

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

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

Je crois que cela devrait (ou vise à) contourner les problèmes de changement de nom de variable locale qui surviennent lors de la minification et qui peuvent provoquer cette erreur.

Cela dit, cela a clairement quelque chose à voir avec le processus de minification, car lorsque je le configure BundleTable.EnableOptimizations = truesur ma machine de développement, je peux le reproduire.

Si vous suivez votre lien, cela vous indique que l'erreur résulte du fait que $ injector ne parvient pas à résoudre vos dépendances. C'est un problème courant avec angular lorsque le javascript est minifié / uglifié / quoi que vous lui fassiez pour la production.

Le problème est lorsque vous avez par exemple un contrôleur;

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

La minification change $scopeet $qdevient des variables aléatoires qui ne disent pas à angulaire quoi injecter. La solution est de déclarer vos dépendances comme ceci:

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

Cela devrait résoudre votre problème.

Juste pour répéter, tout ce que j'ai dit se trouve sur le lien que le message d'erreur vous fournit.

J'ai moi-même rencontré le même problème, mais mes définitions de contrôleur étaient un peu différentes de celles ci-dessus. Pour les contrôleurs définis comme ceci:

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

Ajoutez simplement une ligne après la déclaration indiquant les objets à injecter lorsque le contrôleur est instancié:

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

Cela le rend sûr pour la minification.

Ce problème se produit lorsque le contrôleur ou la directive ne sont pas spécifiés en tant que tableau de dépendances et de fonction. Par exemple

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

Une fois minifié Le '$ scope' passé à la fonction de contrôleur est remplacé par un nom de variable à une seule lettre. Cela rendra angulaire ignorant de la dépendance. Pour éviter cela, transmettez le nom de la dépendance avec la fonction sous forme de tableau.

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

Si vous avez des fichiers séparés pour l'application angulaire \ resources \ directives et d'autres choses, vous pouvez simplement désactiver la minification de votre bundle d'applications angulaire comme ceci (utilisez new Bundle () au lieu de ScriptBundle () dans votre fichier de configuration de 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"));

Et l'application angulaire apparaîtrait dans le paquet non modifiée.

Si vous avez des fichiers séparés pour l'application angulaire \ resources \ directives et d'autres choses, vous pouvez simplement désactiver la minification de votre bundle d'applications angulaire comme ceci (utilisez new Bundle () au lieu de ScriptBundle () dans votre fichier de configuration de bundle):

Ajoutez les services $ http, $ scope dans la fonction du contrôleur, parfois s'ils manquent, ces erreurs se produisent.

J'ai eu le même problème mais le problème était différent, j'essayais de créer un service et de lui passer $ scope en tant que paramètre.
C'est une autre façon d'obtenir cette erreur comme le dit la documentation de ce lien:

Tenter d'injecter un objet scope dans tout ce qui n'est pas un contrôleur ou une directive, par exemple un service, lèvera également une erreur de fournisseur inconnu: $ scopeProvider <- $ scope error. Cela peut se produire si l'on enregistre par erreur un contrôleur en tant que service, par exemple:

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