전개 후 "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
'programing' 카테고리의 다른 글
여기서 "origin is not allow by Access-Control-Allow-Origin" 오류가 나타나는 이유는 무엇입니까? (0) | 2023.02.17 |
---|---|
Oracle sql에서 "%Type"은 무엇을 의미합니까? (0) | 2023.02.17 |
AngularJS 상수 (0) | 2023.02.17 |
javascript에서 문자열 배열을 배열로 변환 (0) | 2023.02.17 |
wordpress로 스크립트를 큐잉할 때 get_stylesheet_directory_uri()와 get_template_directory_uri()의 차이점은 무엇입니까? (0) | 2023.02.17 |