I have a fairly simple Angular application that runs just fine on my dev machine, but is failing with this error message (in the browser console) after I deploy it:
我有一个相当简单的角化应用程序，在我的开发机器上运行良好，但是在我部署它之后(在浏览器控制台中)这个错误消息失败了:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20%24http%20%3C-%20%24compile
未捕获错误:[$注射器:unpr]http://errors.angularjs.org/undefined/ $喷射器/ unpr ? p0 = tProvider % 20% 3 c - % 20 t % 3 c - 24 http % % 20% 20% 20% 3 c - % 20% 24编译
No other message besides that. It happens when the page first loads.
除此之外没有其他消息。它发生在页面首次加载时。
I'm running ASP.NET MVC5, Angular 1.2RC3, and pushing to Azure via git.
我运行ASP。NET MVC5，角为1.2RC3，通过git推入Azure。
Googling hasn't turned up anything interesting.
谷歌搜索没有发现任何有趣的东西。
Any suggestions?
有什么建议吗?
EDIT:
编辑:
I'm using TypeScript, and defining my dependencies with the $inject variable, e.g.:
我正在使用TypeScript，并使用$inject变量来定义我的依赖关系，例如:
export class DashboardCtrl {
public static $inject = [
'$scope',
'$location',
'dashboardStorage'
];
constructor(
private $scope: IDashboardScope,
private $location: ng.ILocationService,
private storage: IDashboardStorage) {
}
}
I believe that should (or is intended to) get around the local variable renaming problems that arise during minification and that can cause this error.
我认为应该(或打算)绕过在缩小过程中出现的局部变量重命名问题，这会导致这个错误。
That said, it clearly has something to do with the minification process, as when I set BundleTable.EnableOptimizations = true on my dev machine, I can reproduce it.
也就是说，它显然与缩小过程有关，就像我设置BundleTable时一样。在我的开发机器上，enableoptimization = true，我可以复制它。
7 个解决方案
#1
152
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.
如果您遵循您的链接，它会告诉您错误是由于$injector无法解析您的依赖项。当javascript被缩小/丑陋化/为生产所做的任何事情时，这是一个常见的问题。
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:
迷你化将$scope和$q转换为随机变量，这些变量不会告诉我们要注入什么。解决方案是像这样声明您的依赖项:
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.
为了重新迭代，我所说的一切都在错误消息提供给您的链接中。
#2
13
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.
这使得它minification-safe。
#3
11
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.
当缩小传递给控制器函数的“$scope”时，将用单个字母变量名代替。这将导致对依赖项的角度模糊。为了避免这种情况，将依赖项名称与函数作为数组一起传递。
angular.module("appName").directive('directiveName', function () {
return {
restrict: 'AE',
templateUrl: 'calender.html'
controller: ['$scope', function ($scope) {
$scope.selectThisOption = function () {
// some code
};
}]
};
});
#4
9
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):
如果您已经为角应用程序资源\指令和其他东西分离了文件，那么您可以禁用这样的角应用程序包(使用new bundle()而不是在bundle配置文件中使用ScriptBundle())):
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.
而角应用程序将会出现在未修改的包中。
#5
0
Add the $http, $scope services in the controller fucntion, sometimes if they are missing these errors occur.
在控制器fucntion中添加$http、$scope服务，有时如果缺少这些错误就会发生。
#6
0
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):
如果您已经为角应用程序资源\指令和其他东西分离了文件，那么您可以禁用这样的角应用程序包(使用new bundle()而不是在bundle配置文件中使用ScriptBundle())):
#7
0
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:
我遇到了同样的问题，但问题不同，我试图创建一个服务并将$scope作为参数传递给它。这是得到这个错误的另一种方法因为这个链接的文档说明:
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
尝试将范围对象注入任何非控制器或指令(例如服务)的内容，也会抛出一个未知的提供者:$scopeProvider
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.
}]);
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
