프로그래밍/웹관련
[AgularJS 1.x] 미니마이즈(Minimized)시 '$injector:modulerrModule Error'가 난다?
2016. 9. 21. 15:00

Error: $injector:modulerrModule Error

Error: $injector:unprUnknown Provider

 

이런 에러는 앵귤러 내부에서 모듈 매칭이 실패 했을 때 주로 발생합니다.

 

특히 asp.net의 번들(Bundle) 기능 같은 미니마이즈(Minimized)를 하게 되면 반드시 펑션의 매개변수가 단순화되고 이 문제 때문에 앵귤러 내부모듈을 찾을 수 없어 에러가 나게 됩니다.

 

미니마이즈를 사용하지 않으면 앵귤러 내부모듈과 이름으로 매칭이 되기 때문에 에러가 나지 않습니다.

 

1. 테스트 코드

아래 코드를 실행해 봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html ng-app="myApp">
<head>
 
 
    <title></title>
</head>
<body ng-controller="MainController">
 
    <h1>Minimized Test</h1>
    <br />
 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
 
    <script>
        var app = angular.module('myApp', ['ngRoute']);
        
        app.controller('MainController', function ($scope) {
            alert('성공!');
        });
    </script>
</body>
</html>
 cs

 

정상적으로 동작합니다.

 

 

 

2. 미니마이즈를 해보자.

이제 자바스크립트 부분을 미니마이즈 하여 사용해 봅시다.

(참고 : [Javascript] 미니마이저(Minimized) 툴 - goolge Closure Compiler )

 

 

1
2
3
<script>
    var app = angular.module("myApp", ["ngRoute"]); app.controller("MainController", function (a) { alert("\uc131\uacf5!") });
</script>
 cs

 

알랏창이 뜨지 않는걸 볼 수 있고 콘솔을 열어보면 다음과 같은 에러가 난걸 확인 할 수 있습니다.

 

 

소스 코드를 보면 컨트롤러에 연결된 함수의 매개변수가 'a'로 변경된 것을 볼 수 있습니다.

이 문제 때문에 앵귤러의 모듈과 연결할 수 없는 것이죠.

 

 

3. 해결 방법

이 문제를 해결하려면 아래와 같이 앵귤러 모듈과 변수를 매칭시켜야 합니다.

 

1
2
3
4
5
6
7
/*var app = angular.module('myApp', ['ngRoute']);
        
app.controller('MainController', [ '$scope', function ($scope) {
    alert('성공!');
}]);*/
 
var app = angular.module("myApp", ["ngRoute"]); app.controller("MainController", ["$scope", function (a) { alert("\uc131\uacf5!") }]);
 cs

 

이제 정상 작동하는 것을 볼 수 있습니다.

티스토리툴바