컴파일 된 js 파일에서 Uncaught Error : [$ injector : modulerr]를 어떻게 디버깅 할 수 있습니까?

Question

내가 내 모든 JS를 컴파일하고, Laravel 비약를 사용하여 CSS를 내 사이트를로드하는 동안 Gulp

를 통해, 내 콘솔에서이 오류를보고 계속

all-04432621a2.js : 1은 컴파일 된 파일입니다.

는

http://errors.angularjs.org/1.5.6/ $injector/modulerr?p0=signinApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.6%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A412%0A%20%20%20%20at%20http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A18991%0A%20%20%20%20at%20i%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A17735)%0A%20%20%20%20at%20r%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A17969)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A18059)%0A%20%20%20%20at%20i%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A17204)%0A%20%20%20%20at%20http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A17328%0A%20%20%20%20at%20i%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A860)%0A%20%20%20%20at%20l%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A17105)%0A%20%20%20%20at%20Be%20(http%3A%2F%2Fbheng.dev%2Fbuild%2Fassets%2Ffe%2Fjs%2Fall-04432621a2.js%3A1%3A19151

---

어떻게이 더 디버깅 할 링크?

Answer 1

그래서, initial error은 이것이다 :

Unknown provider: e

난 당신이 명시 적으로 제공 'E'또는 같은 중 하나의 이름을하지 않았다고 확신 해요, 그래서 e을 같은데요 공급자 또는 서비스 중 하나를 참조하는 데 사용되는 이름과 해당 서비스가 주입되기를 기대했던 것의 축소 이름입니다.

AngularJS는 시작시 응용 프로그램을 연결하는 데 dependency injection을 사용하지만이를 수행하려면 주입 할 사물의 이름을 알아야합니다. 손상되지 않은 파일에서는 쉽습니다. 매개 변수 이름은 구성 요소 이름과 일치합니다.

그러나 인젝터가 작동하려면 축소 파일이 annotated properly이어야합니다. 특수 효과는 다음과 같이 보입니다.

배열 항목이 구성 요소 이름에 해당하는 매개 변수에 매핑되는 방식에 유의하십시오.

앱이 제대로 작동하려면 모든 주입 사이트에 올바르게 주석을 달아야합니다.

이러한 난장판 배열이 마음에 들지 않는다면 ng-annotate을 사용하면이를 피할 수 있습니다.

Answer 2

Andrew Eisenberg은 종속성 삽입과 관련하여 정확합니다. styleguide은 또한 .$inject을 사용하여 주사하는 또 다른 방법을 제안합니다.

그러나 여전히 문제가있을 수 있습니다. gulp --production을 실행할 때이 문제가 발생했습니다.이 문제는 출력 파일에서 맹 글링 된 변수 이름입니다.나는 같은 내 각 코드 (따라서 축소에) 각도 및 부트 스트랩 및 .scripts 등의 사전 축소 된 공급 업체 스크립트에 .combine를 사용하던 내 예에서

// need to stop mangling, i.e. angular.module being converted to e.module and then wondering what is e? 
elixir.config.js.uglify.options.mangle = false; 

elixir(function (mix) { 
    // mix stuff 
}); 

을 : 여기

당신이 그것을 해결하기 위해 무엇을 할 수 각도 코드가 엉망이되어 (e에서 각도), 작동하지 않는 방법에 놀랄 일이 아닙니다.

uglify: { 
    options: { 
     compress: { 
      drop_console: Elixir.inProduction 
     } 
    } 
} 

https://github.com/laravel/elixir/blob/b1aa077b0b2ba757c1a8781a68fcca16a823e765/src/Config.js#L284

내가이 계산 언젠가 보냈다 :

/** 
* Minify the Gulp JS files. 
*/ 
function minifyJs() { 
    return Elixir.Plugins.uglify(
     Elixir.config.js.uglify.options 
    ); 
} 

여기

https://github.com/laravel/elixir/blob/b1aa077b0b2ba757c1a8781a68fcca16a823e765/src/tasks/utilities/minifier.js#L44

은 JS의 파일 축소에 대한 기본 설정입니다 : 여기

---

은 JS의 파일 축소 수행하는 코드입니다 혼자 힘으로도 나에게 도움이되기를 바랍니다.