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


97

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

답변:


163

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

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

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


2
실제로 링크를 방문하도록 제안 해주셔서 감사합니다. 저는 그것이 제 이익을위한 것이 아니라 내부 인공물이라고 생각했습니다. 결과적으로 $inject공개 변수 를 통해 모든 종속성을 정의하고 있는데, 이는 귀하가 제안하는 방식과 동일하다고 생각합니다 ( docs.angularjs.org/guide/di 참조 ). 내 질문을 업데이트하겠습니다.
켄 스미스

2
즉, 개발자 컴퓨터 ( BundleTable.EnableOptimizations = true;) 에서 ASP.NET MVC 축소를 강제 할 때 문제를 재현 할 수 있으므로 축소 프로세스와 분명히 관련이 있습니다. 계속 봅니다.
Ken Smith

좋아, 알아 냈어. 내가 잊어 버린 DI를하는 또 다른 장소가 있는데, 그것은 축소 과정에서 엉망이되고있었습니다. 감사합니다. 정답이었습니다.
Ken Smith

ngmin 이라고하는이를 자동으로 처리하는 패키지 와 ngmin-rails 라는 Rails 용 gem도 있습니다.
bradleygriffith

2
@RyanTuck-즉, 축소되지 않은 코드를 사용하면 Angular는 함수의 변수 이름을보고 무엇을 주입해야하는지 잘 추측 할 수 있습니다. 그러나 축소 된 코드를 사용하면 변수 이름이 모두 뭉쳐 지므로 코드가 축소 될 때 변경되지 않는 메커니즘 인 다른 메커니즘이 필요합니다. 여기서 $ inject 배열과 다른 메커니즘이 작동합니다.
Ken Smith

13

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

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

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

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

이것은 축소에 안전합니다.


11

이 문제는 컨트롤러 또는 지시문이 종속성 및 함수의 배열로 지정되지 않은 경우 발생합니다. 예를 들면

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

10

각도 app \ resources \ directives 및 기타 항목에 대한 파일을 분리 한 경우 다음과 같이 각도 앱 번들의 축소를 비활성화 할 수 있습니다 (번들 구성 파일에서 ScriptBundle () 대신 new 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"));

그리고 각도 앱은 수정되지 않은 번들로 표시됩니다.


성능에 대해 어느 것이 더 낫습니까? Bundle () 또는 ScriptBundle ()?
Thomas.Benz

@ Thomas.Benz Bundle ()을 사용하면 스크립트의 축소 만 비활성화됩니다. 여기서 문제는 ScriptBundle ()이 일부 Angular 스크립트를 축소 할 때 함수 이름을 줄이고 기타 관련 작업을 수행한다는 것입니다. 그리고 Angular가 내부 의존성 주입이나 그와 비슷한 것을 시도 할 때, 이름이 사용자 지정 방식으로 변경 되었기 때문에 ( 'SuperController'에서 's'등으로) 적절한 기능을 찾을 수 없습니다. 따라서 각도 스크립트를 수정하지 않은 상태로 두거나 기본 라이브러리 대신 축소를 위해 다른 라이브러리를 사용하는 것이 좋습니다.
Schnapz

1

각도 app \ resources \ directives 및 기타 항목에 대한 파일을 분리 한 경우 다음과 같이 각도 앱 번들의 축소를 비활성화 할 수 있습니다 (번들 구성 파일에서 ScriptBundle () 대신 new Bundle () 사용).


0

컨트롤러 기능에 $ http, $ scope 서비스를 추가하십시오. 때때로 누락 된 경우 이러한 오류가 발생합니다.


0

나는 같은 문제가 있었지만 문제는 다른 문제였습니다. 나는 서비스를 만들고 $ scope를 매개 변수로 전달하려고했습니다.
해당 링크의 문서에 나와 있듯이이 오류가 발생하는 또 다른 방법입니다.

컨트롤러 나 지시어가 아닌 서비스 (예 : 서비스)에 범위 개체를 삽입하려고하면 알 수없는 공급자 : $ 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.
}]);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.