programing

최소화된 각도 javascript에서 알 수 없는 제공자를 디버깅하고 있습니다.

subpage 2023. 4. 4. 21:17
반응형

최소화된 각도 javascript에서 알 수 없는 제공자를 디버깅하고 있습니다.

앵귤러 앱에서 에러의 원인이 되고 있는 많은 방법 중 어떤 것을 특정하는 데 어려움을 겪고 있습니다.

Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n

이것은 javascript가 ASP에 의해 번들 및 최소화된 경우에만 발생합니다.그물.

모든 컨트롤러 및 기타 DI가 최소 안전 방식인 I을 사용하고 있는지 확인합니다.E 컨트롤러/서비스 등은 다음 방법을 사용하고 있습니다.

appControllers.controller('myCtrl', ['$scope', function($scope){
        //......
}]);

앱에 있는 모든 JS파일을 살펴봤는데...이런 의존성 주입 방식을 위반하는 건 아무것도 찾을 수 없어요 어딘가에 분명히 있을 거예요

이 에러의 원인일 가능성이 있는 방법을 특정할 수 있는 더 좋은 방법이 있습니까?

감사해요.

이 문제로 어려움을 겪고 있는 사람들을 위해, 저는 더 쉬운 해결책을 찾았습니다.(크롬에서) 개발자 콘솔을 당겨 열고 각도가 오류를 발생시키는 중단점을 추가하는 경우:

에러 투척

그런 다음 오른쪽 스택트레이스에서 첫 번째 '호출'을 클릭합니다.그러면 호출 함수로 이동합니다. 여기서 첫 번째 파라미터는 각도가 주입하려고 하는 함수입니다.

기능을 점검할 수 있었습니다.

그런 다음 코드 내에서 이와 유사한 기능을 검색했습니다(이 경우).grep "\.onload" -R public여덟 살

이 글을 읽는 사람은 Angular 1.3을 사용합니다.

이제 Angular의 ng-strict-di 체크를 다음과 같이 사용할 수 있습니다.

<div ng-app="some-angular-app" ng-strict-di>
  ...
</div>

어레이 구문을 사용하여 종속성을 로드하지 않은 경우 적절한 오류 메시지가 나타납니다.

나도 같은 문제가 있었고 나머지 사람들에게 도움이 될 수 있는 해결책을 찾았다.제가 제안하는 것은 기본적으로 제가 댓글과 문서에서 본 것입니다.Angular 1.3.0 이상을 사용하는 경우 다음을 사용할 수 있습니다.

<html ng-app="myApp" ng-strict-di>
   <body>
      I can add: {{ 1 + 2 }}.
      <script src="angular.js"></script>
    </body>
</html>

내 경우 파일 app.js에 모든 것이 있기 때문에 DI 문제를 찾기 위해 해야 할 일은 마지막에 이 작은 코드를 추가하는 것뿐입니다.

angular.bootstrap(document, ['myApp'], {
  strictDi: true
});

Angular Docs에 더 잘 설명되어 있습니다.

도움이 됐으면 좋겠어요.행운을 빕니다.

댓글에 기재되어 있는 바와 같이 JS 에러를 찾아내기 위해 취한 조치입니다.

또 다른 쉬운 해결책이 있으면 언제든지 투고해 주세요.그렇다면 합격으로 표시할 수 있습니다.


미니코드 디버깅은 악몽입니다.

결국 Chrome의 인스펙터로부터 직접 minified javascript를 복사했습니다.

그런 다음 JS를 http://www.jspretty.com/에 붙여 넣었습니다.http://jsbeautifier.org/에 접속해 봤지만 JS코드가 너무 커서 사이트가 정지되어 있었습니다.

일단 '예쁘게' 된 후 솔루션에 test.js 파일을 만들고 코드를 읽기 쉬워진 파일을 붙여 넣었습니다.

코멘트를 작성하기 위한 간단한 절차@script내 태그인_layouttest.js 파일에 링크를 추가하면 바로 읽을 수 있는 Javascript 청크를 디버깅할 준비가 되었습니다.

콜 스택을 통과하는 것은 여전히 매우 곤란하지만, 실제 메서드를 확인할 수 있게 되어 콜 스택의 실행이 훨씬 어려워졌습니다.

(드디어) 이 문제를 해결하는 데 도움이 된 것이 실제로 이미 각진 문서 안에 있었습니다!를 추가하면ng-strict-di코드를 정의하면 어디에 있든ng-appangular는 개발 모드에서 무슨 일이 일어나고 있는지 보다 쉽게 볼 수 있도록 엄격한 경고를 보냅니다.그게 디폴트였으면 좋겠어!

ngApp 문서 하단에 있는 인수 목록을 참조하십시오.

https://docs.angularjs.org/api/ng/directive/ngApp

이 방법은 다음과 같습니다.

1) 2개의 테스트 사양 html 파일(유닛 테스트)을 최소화하고 플레인하게 한다.

2) 파일의 번들 순서가 플레인 스펙 파일과 같은 것을 확인합니다(JS 스크립트 참조).

3) 반드시 모든 의존관계를 명시적으로 선언합니다(array 또는 $disclares 선언은 http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html) 참조).

유닛 테스트(최소 참조) 파일에 오류가 있는 경우, 작업 파일로서 파일의 참조가 올바른 순서로 되어 있는 것을 확인할 수 있습니다.

도움이 됐으면 좋겠네요

비슷한 문제가 있어서 많은 시간을 들여 조사했는데, Angular에서 불량 코드를 삽입하고 있는 것은 Chrome 확장 Batarang이고, 에러는 완전히 똑같다는 것을 알게 되었습니다.정확히 무엇이 문제의 원인인지 찾기가 너무 어렵다니 정말 안타깝다.

저도 비슷한 문제가 있었어요.해결책은 분명히 오즈카리 포인트 3에서 나온 답입니다.즉, 경로의 "해결" 부분을 포함한 모든 의존성을 명시적으로 선언하는 것입니다.

아래는 제 코드입니다.

when('/contact/:id', {
      controller: 'contactCtrl',
      templateUrl: 'assets/partials/contact.html',
      resolve: {
         contact: ['ContactService', '$route', function(ContactService, $route) {
            return ContactService.getContactDetail($route.current.params.id);
         }]
      }
})

angularjs 앱을 부트스트래핑하고 있는 분들을 위해.

angular.bootstrap(body, ['app'], { strictDi: true });

최소화되지 않은 코드로 디버깅하는 것을 잊지 마십시오.부정한 형식의 의존성 주입을 매우 빠르게 파악할 수 있습니다.

잘못된 형식의 주입은 보통 다음과 같이 포맷됩니다.

...
.run([ function(ServiceInjected){
...

하지만 이렇게 생겼으면 좋겠어

...
.run(['ServiceInjected', function(ServiceInjected){
...   

이것은 angularjs 1.7.2에서 테스트된다.

언급URL : https://stackoverflow.com/questions/23480591/debugging-unknown-provider-in-minified-angular-javascript

반응형