100

我有一个相当简单的 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.2RC3，并通过 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在我的开发机器上设置时，我可以重现它。

4

7 回答 7

168

如果您点击链接，它会告诉您错误是由于 $injector 无法解决您的依赖关系造成的。当 javascript 被缩小/丑化/无论你对它做什么以进行生产时，这是 angular 的一个常见问题。

问题是当你有一个控制器时；

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

缩小变化$scope并$q变成随机变量，这些变量不会告诉角度注入什么。解决方案是像这样声明您的依赖项：

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

那应该可以解决您的问题。

重申一遍，我所说的一切都在错误消息提供给您的链接中。

于 2013-10-30T01:18:25.947 回答
13

我自己也遇到了同样的问题，但我的控制器定义看起来与上面有点不同。对于这样定义的控制器：

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

只需在声明后添加一行，指示在实例化控制器时要注入哪些对象：

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

这使得它可以安全地缩小。

于 2014-03-20T14:00:40.103 回答
11

当控制器或指令未指定为依赖项和函数的数组时，会出现此问题。例如

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

当 minified 传递给控制器​​函数的 '$scope' 被单个字母变量名替换。这将使依赖的角度毫无头绪。为了避免这种情况，将依赖项名称与函数一起作为数组传递。

angular.module("appName").directive('directiveName', function () {
    return {
        restrict: 'AE',
        templateUrl: 'calender.html'
        controller: ['$scope', function ($scope) { //<-- difference
            $scope.selectThisOption = function () {
                // some code
            };
        }]
    };
});
于 2015-05-06T09:08:32.977 回答
10

如果您为 Angular app\resources\directives 和其他东西分离了文件，那么您可以像这样禁用 Angular 应用程序包的缩小（在您的包配置文件中使用 new 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"));

并且角度应用程序将出现在未修改的捆绑包中。

于 2014-05-28T14:06:33.083 回答
1

如果您为 Angular app\resources\directives 和其他东西分离了文件，那么您可以像这样禁用 Angular 应用程序包的缩小（在您的包配置文件中使用 new Bundle() 而不是 ScriptBundle() ）：

于 2017-08-25T12:42:43.767 回答
0

在控制器功能中添加 $http、$scope 服务，有时如果缺少这些服务会出现这些错误。

于 2017-02-22T11:53:32.420 回答
0

我有同样的问题，但问题是不同的，我试图创建一个服务并将 $scope 作为参数传递给它。
这是获得此错误的另一种方法，因为该链接的文档说：

尝试将作用域对象注入任何不是控制器或指令的对象（例如服务）也会引发 Unknown provider: $scopeProvider <- $scope 错误。如果错误地将控制器注册为服务，则可能会发生这种情况，例如：

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.
}]);
于 2018-01-26T23:39:22.820 回答