部署后带有角度的“未捕获错误: [ $injector: unpr ]”

我有一个相当简单的 Angular 应用程序,它在我的开发计算机上运行得很好,但是在我部署它之后出现了这个错误消息(在浏览器控制台中) :

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

除此之外没有其他消息。这在页面首次加载时发生。

我正在运行 ASP.NET MVC5,Angular 1.2 RC3,并通过 git 推送到 Azure。

在谷歌上没有发现任何有趣的东西。

有什么建议吗?

编辑:

我正在使用 TypeScript,并用 $inject变量定义我的依赖关系,例如:

export class DashboardCtrl {


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


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

我相信应该(或者是打算)解决在缩小过程中出现的本地变量重命名问题,这可能会导致这个错误。

也就是说,它显然与缩小过程有关,因为当我在开发人员机器上设置 BundleTable.EnableOptimizations = true时,我可以重现它。

111106 次浏览

If you follow your link, it tells you that the error results from the $injector not being able to resolve your dependencies. This is a common issue with angular when the javascript gets minified/uglified/whatever you're doing to it for production.

The issue is when you have e.g. a controller;

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

The minification changes $scope and $q into random variables that doesn't tell angular what to inject. The solution is to declare your dependencies like this:

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

That should fix your problem.

Just to re-iterate, everything I've said is at the link the error message provides to you.

Ran into the same problem myself, but my controller definitions looked a little different than above. For controllers defined like this:

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

Just add a line after the declaration indicating which objects to inject when the controller is instantiated:

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

This makes it minification-safe.

If you have separated files for angular app\resources\directives and other stuff then you can just disable minification of your angular app bundle like this (use new Bundle() instead of ScriptBundle() in your bundle config file):

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"));

And angular app would appear in bundle unmodified.

This problem occurs when the controller or directive are not specified as a array of dependencies and function. For example

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

When minified The '$scope' passed to the controller function is replaced by a single letter variable name . This will render angular clueless of the dependency . To avoid this pass the dependency name along with the function as a array.

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

Add the $http, $scope services in the controller fucntion, sometimes if they are missing these errors occur.

If you have separated files for angular app\resources\directives and other stuff then you can just disable minification of your angular app bundle like this (use new Bundle() instead of ScriptBundle() in your bundle config file):

I had the same problem but the issue was a different one, I was trying to create a service and pass $scope to it as a parameter.
That's another way to get this error as the documentation of that link says:

Attempting to inject a scope object into anything that's not a controller or a directive, for example a service, will also throw an Unknown provider: $scopeProvider <- $scope error. This might happen if one mistakenly registers a controller as a service, ex.:

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