AngularJS 1.2 $ 인젝터 : 모듈


445

1.07 대신 angular 1.2를 사용할 때 다음 코드는 더 이상 유효하지 않습니다. 왜 그렇습니까?

'use strict';

var app = angular.module('myapp', []);

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/', {
            templateUrl: 'part.html',
            controller: 'MyCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
    }
]);

문제는 인젝터 구성 부분 (app.config)에 있습니다.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=Error%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A31%3A252) 

내가 올바르게 기억한다면이 문제는 각도 1.1.6으로 시작했습니다.

답변:


636

ngRoute 모듈이 포함되지 않아서 문제가 발생했습니다. 버전 1.1.6부터는 별도의 부분입니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

492
어떤 모듈이 누락되었는지 확실하지 않은 경우 읽을 수없는 오류 메시지를 제공하는 축소되지 않은 angular.js를 사용하십시오."Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."
Mart

2
흠, bower를 사용하고 있으며 .map 파일을 제공합니다. Chrome에서 축소 된 파일의 오류가 여전히 나타나는 이유가 궁금합니다. @Mart 머리를 주셔서 감사합니다!
Aditya MP

5
@ arg20, 당신은 대답을 찾을 수 있습니다 : github.com/angular/angular.js/commit/…
Laurent

4
거룩한 소 나는 이것에 대한 해결책을 찾기 위해 모든 곳을 찾고 있습니다. 1.0에서 1.2로 업그레이드했는데이 오류가 발생했습니다. 내가 찾을 수있는 유일한 조언은 angular-route.js가 포함되어 있는지 확인하는 것입니다. Angular 문서의 팬이 아닙니다. 어쨌든 고마워! 나는 투표했다.
RachelD

4
모듈을 정의하는 동안 angular.module ( 'myModule', []) 대신 angular.module ( 'myModule')을 사용하면이 오류가 발생할 수 있습니다. stackoverflow.com/questions/16260538/…
Anirudhan J

42

끝에이 '()'를 추가하면 오류가 사라졌습니다.

(function(){
    var home = angular.module('home',[]);

    home.controller('QuestionsController',function(){
        console.log("controller initialized");
        this.addPoll = function(){
            console.log("inside function");
        };
    });
})();

40

Google 검색에서 '오류 : [$ injector : modulerr] angular'라는 첫 번째 결과이므로 목록에 추가해야 할 사항이 하나 더 있습니다.

'index'html'과 기본 자바 스크립트 앱 정의에서 앱 이름이 일치하지 않으면이 오류가 발생할 수도 있습니다.

예를 들어 HTML이 다음과 같은 경우

    </head>
    <body ng-app="myWebSite">

        <!-- My Web Site -->
        <p>About my web site...</p>

        etc ...

그리고 JavaScript는 다음과 같습니다 (예 : myWebSite 대신 myWebCite-앱 이름에 오타가 있음).

/** Main AngularJS Web Application */ 
var app = angular.module('myWebCite', [ 'ngRoute' ]); 

/** Configure the Routes */ 
app.config(['$routeProvider', function ($routeProvider) { 
  etc ...

'Error : [$ injector : modulerr] angular'오류도 생성됩니다.


나는 이것에 매우 가까웠다. ng-app = "app"...를 설정 한 다음 모듈을 설정하지 않았습니다. 그래서 오류가 발생했습니다. 초보자로서 샘플 코드가 작동하도록 = "app"조각을 제거했습니다. 나중에 올바른 모듈과 라우팅을 설정했습니다 ... :)
Eric Burdo

25

멍청한 오류는 모듈 js를 포함하는 것을 잊어 버릴 수 있습니다.

<script src="app/modules/myModule.js"></script>

index.html의 파일


24
디버깅 / 오류 메시지가 각도에 얼마나 나쁜지 놀랍습니다.
K-SO의 독성이 증가하고 있습니다.

3
LOL. 나는 내 자신에게 말했다, 아니, 나는이 간단한 오류를 만들 수 없습니다. 그리고 나는 당신의 대답을 여러 번 전달했습니다. 그러나 그것은 내 문제를 해결했습니다.
Maubeh

수입품이 거의 없습니다
famas23

13

파일을 압축, 번들 및 축소하는 프레임 워크를 사용하는 경우 이러한 프레임 워크가 변수의 이름을 바꾸는 경향이 있으므로 각 종속성을 명시 적으로 정의해야합니다. ASP.NET BundleConfig.cs을 사용하여 앱 스크립트를 함께 묶는 동안 이런 일이 발생했습니다 .

전에

app.config(function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
});

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
}]);

각도 의존성 주석에 대한 자세한 내용은 여기참조하십시오 .


12

console에이 오류가 발생 ([$injector:nomod], MINERR_ASSET:22)하면로드하기 전에 응용 프로그램 코드를 포함하지 않았는지 확인하십시오AngularJS

나는 그것을하고 있었고 일단 주문을 수정하면 오류가 사라졌습니다.


9

방금 동일한 오류가 발생했습니다. 제 경우에는 angular.module누락 된 두 번째 매개 변수로 인해 발생했습니다 . 이는 동일한 문제를 가진 사람에게 도움이되기를 바랍니다.

angular.module('MyApp');

angular.module('MyApp', []);


1
이것은 내 문제였다; angular.module ( 'my.Namespace', []) 의 선언이 없습니다 . 사용하기 전에 . angular.module ( 'my.Namespace')를 지시 ( 'myDirective', [...
ScottFoster1000


6

나는 같은 문제가 있었고 가능한 모든 해결책을 시도했다. 그러나 마침내 나는 ngRoute모듈이 분리되어 있다는 것을 문서에서 알게되었습니다 . 이 링크를 보라

솔루션 : angular.min.js 스크립트 뒤에 cdn angular-route.js를 추가하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

5

이 오류에 대한 또 다른 트리거는 "."를 남기는 것입니다. "다른 방식으로"또는 경로 정의에서 다른 경로 앞에 :

  app.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/view1', {
              templateUrl: 'partials/view1.html',
              controller: 'Ctrl1'
           }).
           otherwise({
              redirectTo: '/viewCounts'
           });
     }]);

다시 한 번 멈췄다. JS를 사랑해야 해요!


4

당신이 콘솔에서이 오류가있는 경우 대답은 아래 외에도, ( [$injector:nomod], MINERR_ASSET:22), 그러나 모든 것이 잘 작동 보인다, 당신이 있는지 확인 하지 않습니다 index.html에 중복 포함 .

파일에 중복 포함 파일이 있고이 모듈을 사용하고 실제 모듈 선언으로 파일 앞에 포함 된 경우에도이 오류가 발생할 수 있습니다.


3

angularjs의 공식 자습서 https://docs.angularjs.org/tutorial/step_07 을 살펴보면

참고 : AngularJS 버전 1.2부터 ngRoute는 자체 모듈에 있으며 위의 Bower를 통해 다운로드 한 추가 angular-route.js 파일을로드하여로드해야합니다.

또한 ngRoute API https://docs.angularjs.org/api/ngRoute 에서 참고하시기 바랍니다

설치 먼저 HTML에 angular-route.js를 포함하십시오.

이 파일은 다음 위치에서 다운로드 할 수 있습니다.

Google CDN 예 : //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js 바우어 예 : bower install angular-route @ XYZ code.angularjs.org 예 : "//code.angularjs.org/XYZ/ angular-route.js ". 여기서 XYZ는 실행중인 AngularJS 버전입니다.

그런 다음 모듈을 종속 모듈로 추가하여 애플리케이션에 모듈을로드하십시오.

angular.module ( 'app', [ 'ngRoute']); 이것으로 당신은 시작할 준비가되었습니다!


2

존 파파는 내 문제를 제공하는 다소 모호한 의견 : 당신이 오류를 얻을 때 때때로, 당신이 파일을 누락 의미한다. 다른 경우에는 사용 후 모듈이 정의되었음을 의미합니다. 이를 쉽게 해결하는 한 가지 방법은 모듈 파일 이름을 * .module.js로 지정하고 먼저로드하는 것입니다.


0

내 문제는 config.xml에있었습니다. 바꾸다:

<access origin="*" launch-external="yes"/>

<access origin="*"/>

고쳤다.


0

인젝터 오류입니다. 인젝터가 없을 수 있으므로 많은 JavaScript 파일을 사용했을 수 있습니다.

일부는 여기에 있습니다 :

var app = angular.module('app', 
    ['ngSanitize', 'ui.router', 'pascalprecht.translate', 'ngResource', 
     'ngMaterial', 'angularMoment','md.data.table', 'angularFileUpload', 
     'ngMessages', 'ui.utils.masks', 'angular-sortable-view',          
     'mdPickers','ngDraggable','as.sortable', 'ngAnimate', 'ngTouch']
);

삽입 할 인젝터를 확인하십시오 app.js


0

때로는 프로젝트 간을 전환하고 동일한 포트에서 프로젝트를 차례로 실행할 때이 오류가 발생했습니다. 이 경우 Chrome 개발자 도구> 네트워크로 이동하여 실제 작성된 js 파일을 확인하십시오 if the file match with the workspce. 이 문제를 해결하려면 Disable Cache네트워크 에서 선택하십시오 .


0

몇 달이 지난 후 AngularJS ( 1.6.4 ) 앱 을 개발하기 위해 돌아 왔습니다 . 개발을 위해 테스트를 위해 Chrome (PC)과 Safari (MAC)를 선택했습니다. 이 코드는 IE 11.0.9600 (Windows 7, 32 비트)에서 $ injector : modulerr 모듈 오류를 표시 했습니다 .

조사 결과, 오류는 forEach 루프 사용 으로 인한 것이 분명해졌으며 모든 forEach 루프를 정상적인 for 루프 로 교체 하여 그대로 작동합니다.

기본적으로 AngularJS 문제가 아닌 IE11 문제 ( here )이지만 제기 된 예외는 AngularJS 예외 이므로이 회신을 여기에 넣고 싶습니다. 그것이 우리 중 일부를 도울 수 있기를 바랍니다.

비슷하게. 람다 함수를 사용하지 마십시오 ... () => {...}을 좋은 ol 'function () {...}으로 바꾸십시오.


0

이 문제가 있었고 코드를 한 줄씩 확인한 후 이것을 보았습니다.

 <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"/>

난 그냥 그것을 변경

     <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"></textarea>

작동했습니다. 태그를 확인하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.