AngularJS 1.2 $ Injektor: Modulerr

445

Wenn Sie den Winkel 1.2 anstelle von 1.07 verwenden, ist der folgende Code nicht mehr gültig. Warum?

'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: '/'
        });
    }
]);

Das Problem liegt im Injektorkonfigurationsteil (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)

Wenn ich mich richtig erinnere, begann dieses Problem mit Angular 1.1.6.

javascript angularjs shoen
quelle

636

Das Problem wurde durch die fehlende Aufnahme des ngRoute-Moduls verursacht. Seit Version 1.1.6 ist es ein separater Teil:

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

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

shoen
quelle

492

Wenn Sie nicht sicher sind, welches Modul fehlt, verwenden Sie die nicht minimierte angle.js, die eine lesbare Fehlermeldung gibt:

"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

Hmm, ich verwende Bower und es enthält .map-Dateien. Ich frage mich, warum Chrome mir immer noch Fehler aus der minimierten Datei angezeigt hat. Danke für das Heads Up, @Mart!

Aditya MP

5

@ arg20, finden Sie die Antwort hier: github.com/angular/angular.js/commit/…

Laurent

4

Heilige Kuh Ich habe ÜBERALL nach der Lösung dafür gesucht. Ich habe ein Upgrade von 1.0 auf 1.2 durchgeführt und diesen Fehler erhalten. Der einzige Rat, den ich finden konnte, ist sicherzustellen, dass angle-route.js enthalten war, was es war ... Kein Fan der Angular-Dokumente. Trotzdem danke! Ich habe hochgestimmt.

RachelD

4

Dieser Fehler kann auftreten, wenn Sie beim Definieren Ihres Moduls angular.module ('myModule') anstelle von angle.module ('myModule', []) verwenden. stackoverflow.com/questions/16260538/…

Anirudhan J

42

Mein Fehler verschwand, indem ich am Ende dieses '()' hinzufügte

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

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

arp
quelle

40

Eine weitere Sache, die der Liste hinzugefügt werden muss, da dies das erste Ergebnis ist, das eine Google-Suche nach "Fehler: [$ Injektor: Modulerr] Winkel" ergibt:

Wenn Ihr App-Name in Ihrer 'index'html' und in Ihrer Hauptdefinition für die Javascript-App nicht übereinstimmt, kann dies ebenfalls zu diesem Fehler führen.

Zum Beispiel, wenn Ihr HTML so aussieht:

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

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

        etc ...

Und Ihr JavaScript sieht folgendermaßen aus (dh es gibt einen Tippfehler beim App-Namen - myWebCite anstelle von myWebSite):

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

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

dann wird auch der Fehler 'Fehler: [$ Injektor: Modulerr] Winkel' generiert.

Mick
quelle

Ich war dem sehr nahe. Ich hatte die ng-app = "app" gesetzt ... und dann nie ein Modul eingerichtet. Es löste also den Fehler aus. Als Anfänger habe ich gerade das Teil = "app" entfernt, damit mein Beispielcode funktioniert. Später richte ich das richtige Modul und Routing ein ... :)

Eric Burdo

25

Ein Noob-Fehler kann vergessen werden, das Modul js einzuschließen

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

Dateien in der index.html überhaupt

otherDewi
quelle

24

Erstaunlich, wie schlecht die Debugging- / Fehlermeldungen im Winkel sind.

K - Die Toxizität in SO nimmt zu.

3

LOL. Ich sagte mir, nein, ich kann diesen einfachen Fehler nicht machen. Und ich habe Ihre Antwort mehrmals weitergegeben. Aber es hat mein Problem gelöst.

Maubeh

Es geht um einen fehlenden Import

famas23

13

Wenn Sie Frameworks verwenden, die Dateien komprimieren, bündeln und minimieren, stellen Sie sicher, dass Sie jede Abhängigkeit explizit definieren, da diese Frameworks dazu neigen, Ihre Variablen umzubenennen. Das ist mir passiert, als ich mit ASP.NET BundleConfig.csmeine App-Skripte gebündelt habe.

Vor

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

Nach

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

Lesen Sie hier mehr über Angular Dependency Annotation.

Moses Machua
quelle

12

Wenn Sie diesen Fehler in der Konsole haben ([$injector:nomod], MINERR_ASSET:22), stellen Sie sicher, dass Sie Ihren Anwendungscode nicht einschließen, bevor Sie ihn ladenAngularJS

Ich tat das und als ich die Bestellung korrigierte, verschwand der Fehler.

Jasdeep Singh
quelle

9

Ich habe gerade den gleichen Fehler festgestellt, in meinem Fall wurde er durch das angular.moduleFehlen des zweiten Parameters verursacht - hoffentlich kann dies jemandem mit dem gleichen Problem helfen.

~~angular.module('MyApp');~~

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

Anth12
quelle

1

Das war mein Problem; Mir fehlte eine Deklaration von angle.module ('my.Namespace', []); vor der Verwendung von angle.module ('my.Namespace'). Direktive ('myDirective', [...

ScottFoster1000

7

add to link
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>

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

SirajuddinLuck
quelle

Vergessen, dass Sie src einschließen müssen, wenn Sie bestimmte Abhängigkeiten verwenden!

K - Die Toxizität in SO nimmt zu.

6

Ich hatte das gleiche Problem und versuchte alle möglichen Lösungen. Aber schließlich habe ich aus der Dokumentation erfahren, dass das ngRouteModul jetzt getrennt ist. Schauen Sie sich diesen Link an

Lösung: Fügen Sie nach dem Skript angle.min.js die Datei cdn angle -route.js hinzu

<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>

Bastin Robin
quelle

5

Ein weiterer Auslöser für diesen Fehler ist das Verlassen des "." vor Ihrem "Andernfalls" oder einer anderen Route in Ihrer Routendefinition:

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

Wieder einmal durch einen Punkt beschämt. Ich muss JS lieben!

Hilary
quelle

4

Wenn Sie diesen Fehler in console ( [$injector:nomod], MINERR_ASSET:22) haben, aber alles gut zu funktionieren scheint, stellen Sie neben der folgenden Antwort sicher, dass Ihre index.html keine doppelten Includes enthält.

Da dieser Fehler auch ausgelöst werden kann, wenn Sie doppelte Includes der Dateien haben, die dieses Modul verwenden und vor der Datei mit der tatsächlichen Moduldeklaration enthalten sind.

Pleerock
quelle

3

Wenn Sie das offizielle Tutorial von anglejs https://docs.angularjs.org/tutorial/step_07 durchgehen

Hinweis: Ab AngularJS Version 1.2 befindet sich ngRoute in einem eigenen Modul und muss durch Laden der zusätzlichen Datei angle-route.js geladen werden, die wir oben über Bower herunterladen.

Bitte beachten Sie auch von ngRoute api https://docs.angularjs.org/api/ngRoute

Installation Fügen Sie zuerst angle-route.js in Ihr HTML ein:

Sie können diese Datei von folgenden Stellen herunterladen:

Google CDN zB //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Laube zB Laube installieren Angular-Route @ XYZ code.angularjs.org zB "//code.angularjs.org/XYZ/ angle-route.js "wobei XYZ die AngularJS-Version ist, die Sie ausführen.

Laden Sie dann das Modul in Ihre Anwendung, indem Sie es als abhängiges Modul hinzufügen:

angle.module ('app', ['ngRoute']); Damit können Sie loslegen!

zahid9i
quelle

2

John Papa hat mein Problem zu diesem eher obskuren Kommentar angegeben: Manchmal, wenn Sie diesen Fehler erhalten, bedeutet dies, dass Sie eine Datei vermissen. In anderen Fällen bedeutet dies, dass das Modul nach seiner Verwendung definiert wurde. Eine Möglichkeit, dies einfach zu lösen, besteht darin, die Moduldateien * .module.js zu benennen und diese zuerst zu laden.

Josh
quelle

0

Mein Problem war in der config.xml. Ändern:

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

zu

<access origin="*"/>

repariert.

Frank Conry
quelle

0

Es ist ein Injektorfehler. Möglicherweise haben Sie viele JavaScript-Dateien verwendet, sodass der Injektor möglicherweise fehlt.

Einige sind hier:

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']
);

Bitte überprüfen Sie den Injektor, den Sie in Ihren einführen müssen app.js

Bipin Shilpakar
quelle

0

Manchmal habe ich diesen Fehler gesehen, wenn Sie zwischen den Projekten wechseln und die Projekte nacheinander auf demselben Port ausführen. In diesem Fall gehen Sie zu Chrome Developer Tools> Network und versuchen Sie, die tatsächlich geschriebene js-Datei auf Folgendes zu überprüfen : if the file match with the workspce. Um dies zu beheben, wählen Sie Disable Cacheunter Netzwerk.

Shashi Ranjan
quelle

0

Nach vielen Monaten kehrte ich zurück, um eine AngularJS ( 1.6.4 ) -App zu entwickeln, für die ich Chrome (PC) und Safari (MAC) zum Testen während der Entwicklung auswählte. Dieser Code zeigte diesen Fehler an: $ insertor: modulerr Module Error in IE 11.0.9600 (Windows 7, 32-Bit).

Bei der Untersuchung wurde klar, dass der Fehler auf die Verwendung der forEach- Schleife zurückzuführen war. Ersetzte einfach alle forEach- Schleifen durch normale for- Schleifen, damit die Dinge so funktionieren, wie sie sind ...

Es war im Grunde ein IE11-Problem ( hier beantwortet ) und kein AngularJS-Problem, aber ich möchte diese Antwort hier einfügen , da die ausgelöste Ausnahme eine AngularJS-Ausnahme war. Hoffe, es würde einigen von uns da draußen helfen.

ähnlich. benutze keine Lambda-Funktionen ... ersetze einfach () => {...} durch eine gute alte Funktion () {...}

Akber Iqbal
quelle

0

Ich hatte dieses Problem und nachdem ich meinen Code Zeile für Zeile überprüft hatte, sah ich dies

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

Ich habe es gerade geändert

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

und es hat funktioniert. Überprüfen Sie also Ihre Tags.

Aref Bozorgmehr
quelle

AngularJS 1.2 $ Injektor: Modulerr

Antworten: