program story

배포 후 각도가있는 "발견되지 않은 오류 : [$ injector : unpr]"

inputbox 2020. 8. 25. 07:57
반응형

배포 후 각도가있는 "발견되지 않은 오류 : [$ injector : unpr]"


내 dev 컴퓨터에서 잘 실행되는 매우 간단한 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개발자 컴퓨터에서 설정할 때 재현 할 수 있으므로 축소 프로세스와 분명히 관련이 있습니다.


링크를 따라 가면 $ 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
}])

그러면 문제가 해결 될 것입니다.

다시 말하지만, 내가 말한 모든 것은 오류 메시지가 제공하는 링크에 있습니다.


동일한 문제가 발생했지만 컨트롤러 정의가 위와 약간 다릅니다. 다음과 같이 정의 된 컨트롤러의 경우 :

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

컨트롤러가 인스턴스화 될 때 삽입 할 개체를 나타내는 선언 뒤에 줄을 추가하면됩니다.

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

This makes it minification-safe.


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) {
            $scope.selectThisOption = function () {
                // some code
            };
        }]
    };
});

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.


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

참고URL : https://stackoverflow.com/questions/19671962/uncaught-error-injectorunpr-with-angular-after-deployment

반응형