Tengo una aplicación Angular bastante simple que se ejecuta sin problemas en mi máquina de desarrollo, pero falla con este mensaje de error (en la consola del navegador) después de desplegarla:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20%24http%20%3C-%20%24compile
.
Ningún otro mensaje aparte de ese. Ocurre cuando se carga la página por primera vez.
Estoy ejecutando ASP.NET MVC5, Angular 1.2RC3, y empujando a Azure a través de git.
Googleando no he encontrado nada interesante.
¿Alguna sugerencia?
EDITAR:
Estoy usando TypeScript, y la definición de mis dependencias con el $inject
variable, por ejemplo:
export class DashboardCtrl {
public static $inject = [
'$scope',
'$location',
'dashboardStorage'
];
constructor(
private $scope: IDashboardScope,
private $location: ng.ILocationService,
private storage: IDashboardStorage) {
}
}
Creo que eso debería (o está pensado para) evitar los problemas de renombrado de variables locales que surgen durante la minificación y que pueden causar este error.
Dicho esto, está claro que tiene algo que ver con el proceso de minificación, ya que cuando pongo BundleTable.EnableOptimizations = true
en mi máquina de desarrollo, puedo reproducirlo.
Si sigues tu enlace, te dice que el error se debe a que el $injector no puede resolver tus dependencias. Este es un problema común con angular cuando el javascript se minified/uglified/whatever you're haciendo a él para la producción.
El problema es cuando tienes, por ejemplo, un controlador;
angular.module("MyApp").controller("MyCtrl", function($scope, $q) {
// your code
})
La minificación cambia $scope
y $q
en variables aleatorias que no le dicen a angular qué inyectar. La solución es declarar tus dependencias así:
angular.module("MyApp")
.controller("MyCtrl", ["$scope", "$q", function($scope, $q) {
// your code
}])
Eso debería arreglar tu problema.
Sólo para reiterar, todo lo que he dicho es en el enlace del mensaje de error proporciona a usted.
Me encontré con el mismo problema, pero mis definiciones de controladores eran un poco diferentes a las anteriores. Para los controladores definidos como este:
function MyController($scope, $http) {
// ...
}
Basta con añadir una línea después de la declaración indicando qué objetos inyectar cuando el controlador se instancie:
function MyController($scope, $http) {
// ...
}
MyController.$inject = ['$scope', '$http'];
Esto lo hace a prueba de minificación.
Si usted tiene archivos separados para angular app\resources\directives y otras cosas entonces usted puede simplemente desactivar la minificación de su paquete de aplicación angular de esta manera (utilice new Bundle() en lugar de ScriptBundle() en su archivo de configuración del paquete):
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"));
Y la aplicación angular aparecerá en el bundle sin modificar.