“Lỗi chưa xảy ra: [$ injectionor: unr]” với góc sau khi triển khai

Tôi có một ứng dụng Angular khá đơn giản chạy tốt trên máy dev của mình, nhưng không thành công với thông báo lỗi này (trong bảng điều khiển trình duyệt) sau khi tôi triển khai nó:

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

Không có tin nhắn nào khác ngoài điều đó. Nó xảy ra khi trang tải lần đầu tiên.

Tôi đang chạy ASP.NET MVC5, Angular 1.2RC3 và đẩy sang Azure qua git.

Googling không đưa ra bất kỳ điều gì thú vị.

Bất kỳ đề xuất?

BIÊN TẬP:

Tôi đang sử dụng TypeScript và xác định các phụ thuộc của tôi với $injectbiến, ví dụ:

export class DashboardCtrl {

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

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

Tôi tin rằng điều đó nên (hoặc dự định) giải quyết các vấn đề đổi tên biến cục bộ phát sinh trong quá trình rút gọn và có thể gây ra lỗi này.

Điều đó nói rằng, nó rõ ràng có liên quan đến quá trình thu nhỏ, như khi tôi thiết lập BundleTable.EnableOptimizations = truetrên máy dev của mình, tôi có thể tái tạo nó.

Nếu bạn nhấp vào liên kết của mình, nó sẽ cho bạn biết rằng lỗi do $ injectionor không thể giải quyết các phần phụ thuộc của bạn. Đây là một vấn đề phổ biến với angle khi javascript được rút gọn / chưa được xác minh / bất cứ điều gì bạn đang làm với nó để sản xuất.

Vấn đề là khi bạn có ví dụ như một bộ điều khiển;

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

Sự thu nhỏ thay đổi $scopevà $qthành các biến ngẫu nhiên không cho biết những gì cần tiêm. Giải pháp là khai báo các phụ thuộc của bạn như sau:

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

Điều đó sẽ khắc phục vấn đề của bạn.

Chỉ cần lặp lại, mọi thứ tôi đã nói đều nằm ở liên kết mà thông báo lỗi cung cấp cho bạn.

Bản thân tôi cũng gặp phải vấn đề tương tự, nhưng định nghĩa bộ điều khiển của tôi trông hơi khác so với ở trên. Đối với bộ điều khiển được định nghĩa như thế này:

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

Chỉ cần thêm một dòng sau phần khai báo cho biết đối tượng nào sẽ được đưa vào khi bộ điều khiển được khởi tạo:

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

Điều này làm cho nó an toàn.

Sự cố này xảy ra khi bộ điều khiển hoặc chỉ thị không được chỉ định là một mảng phụ thuộc và chức năng. Ví dụ

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

Khi được rút gọn, '$ scope' được truyền cho hàm controller được thay thế bằng một tên biến ký tự đơn. Điều này sẽ làm cho sự phụ thuộc trở nên vô nghĩa. Để tránh điều này, hãy chuyển tên phụ thuộc cùng với hàm dưới dạng một mảng.

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

Nếu bạn đã tách các tệp cho ứng dụng góc cạnh \ resources \ chỉ thị và các nội dung khác thì bạn chỉ có thể tắt tính năng thu nhỏ gói ứng dụng góc cạnh của mình như thế này (sử dụng Gói ứng dụng mới () thay vì ScriptBundle () trong tệp cấu hình gói của bạn):

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

Và ứng dụng góc cạnh sẽ xuất hiện trong gói không được sửa đổi.

Nếu bạn đã tách các tệp cho ứng dụng góc cạnh \ resources \ chỉ thị và các nội dung khác thì bạn chỉ có thể tắt tính năng thu nhỏ gói ứng dụng góc cạnh của mình như thế này (sử dụng Gói ứng dụng mới () thay vì ScriptBundle () trong tệp cấu hình gói của bạn):

Thêm các dịch vụ $ http, $ scope trong controller fucntion, đôi khi nếu chúng bị thiếu, những lỗi này sẽ xảy ra.

Tôi đã gặp vấn đề tương tự nhưng vấn đề là một vấn đề khác, tôi đang cố gắng tạo một dịch vụ và chuyển $ scope cho nó dưới dạng tham số.
Đó là một cách khác để gặp lỗi này như tài liệu của liên kết đó cho biết:

Cố gắng đưa một đối tượng phạm vi vào bất kỳ thứ gì không phải là bộ điều khiển hoặc chỉ thị, ví dụ như một dịch vụ, cũng sẽ gây ra lỗi Nhà cung cấp không xác định: $ scopeProvider <- $ scope. Điều này có thể xảy ra nếu một người đăng ký nhầm bộ điều khiển như một dịch vụ, ví dụ:

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