programing

전개 후 "Uncatched Error: [$injector:unpr]"가 각진 상태로 표시됩니다.

lastcode 2023. 2. 17. 19:40
반응형

전개 후 "Uncatched Error: [$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, AngularRC3, Git를 통해 Azure로 푸시.

구글 검색은 흥미로운 것을 찾지 못했다.

좋은 의견이라도 있나?

편집:

TypeScript를 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가 minimize/uglimate/생산할 때 발생하는 일반적인 문제입니다.

이 문제는 컨트롤러가 있는 경우입니다.

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'];

이를 통해 최소화가 안전해집니다.

이 문제는 컨트롤러 또는 디렉티브가 의존관계 및 기능의 배열로 지정되지 않은 경우에 발생합니다.예를들면

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

최소화 시 컨트롤러 함수에 전달된 '$scope'는 단일 문자 변수 이름으로 대체됩니다.이것에 의해, 의존성의 각도가 불명료하게 됩니다.이를 피하기 위해 종속성 이름을 함수와 함께 배열로 전달합니다.

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

angular app\resources\directives 등의 파일을 분리한 경우 다음과 같이 angular app 번들의 최소화를 비활성화할 수 있습니다(번들 구성 파일에서 ScriptBundle() 대신 새로운 Bundle()을 사용합니다).

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

그리고 각도 앱은 수정되지 않은 번들로 나타납니다.

angular app\resources\directives 등의 파일을 분리한 경우 다음과 같이 angular app 번들의 최소화를 비활성화할 수 있습니다(번들 구성 파일에서 ScriptBundle() 대신 새로운 Bundle()을 사용합니다).

컨트롤러 기능에 $http, $scope 서비스를 추가합니다.이러한 서비스가 없는 경우 오류가 발생할 수 있습니다.

같은 문제가 있었지만 다른 문제여서 $scope를 파라미터로 서비스 작성 및 전달하려고 했습니다.
이 링크의 설명서에 기재되어 있듯이, 이 에러가 발생하는 또 다른 방법이 있습니다.

서비스 등 컨트롤러나 디렉티브가 아닌 것에 스코프 오브젝트를 삽입하려고 하면 알 수 없는 프로바이더 $scopeProvider <- $scope error도 느려집니다.이는 컨트롤러를 서비스로 잘못 등록한 경우 다음과 같이 발생할 수 있습니다.

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

반응형