2012-10-20 9 views
16

EDIT laden: Dies ist nur mit IE (getestet auf IE10) geschiehtAngularJS scheitern Modul

Ich habe eine Anwendung, die feine zunächst lädt jedoch, wenn aktualisiert es diesen Fehler gibt:

SCRIPT5022: No module: myAppModule

myAppModule nach dem Laden ein Winkelmodul in app.js definiert, die geladen wird Angularjs

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

und auto-Bootstrap via:

<html ng-app="myAppModule"> 

Die Skripte geladen werden wie folgt (kein AMD-Loader):

<script>window.jQuery || 
    document.write('<script src="js/vendor/jquery-1.8.0.min.js"></script>')</script> 
<script>window.angular || 
    document.write('<script src="js/vendor/angular-1.0.2.min.js"></script>')</script> 

<script src="js/app.js"></script> 
<script src="js/controller.js"></script> 

Ich rechne damit, dass AngularJS zuerst und auto-Bootstrapping die Anwendung immer geladen, aber app.js noch

wurde nicht geladen
+0

Hmm, das ist sehr seltsam, AngularJS wird normalerweise Booster-Module starten, nachdem es voll geladen ist. Könnten Sie ein paar mehr Informationen teilen: Browser verwendet, Methode zum Laden von Scripts (ein einfaches scrit-Tag oder AMD) Link zur Anwendung, mehr Code usw. Ein Plunk wäre ideal. –

+3

bearbeitet. Ich glaube, dass AngularJS vollständig geladen wird, bevor app.js geladen werden kann? Ist das möglich? – nehz

+0

Aus Neugier: Könnten Sie versuchen, jquery und eckig mit einem regulären

3

Ich hatte dieses Problem, nur in IE9. Niedrigere Versionen von IE funktionierten tatsächlich, genauso wie neuere Browser.

Manuell bootstrapping löste das Problem, aber einen Fehler "Unbekannter Provider" für einen Filter, der Teil meines Moduls ist. Beachten Sie, dass der Filter weiterhin wie erwartet funktionierte.

Am Ende war die Lösung, die mein Problem löste und die Fehler von geworfen überhaupt aufhörte, einfach die Moduldatei umzubenennen, um die gleiche wie das Modul zu sein. Wenn der Name meines Moduls myAppModule war, dann sollte der Dateiname myAppModule.js und nicht my_app_module.js sein.

6

fühlte ich mich wie und Idiot, wenn ich gefunden, was ich falsch mache, aber falls du bist wie ich, dann einige andere Dinge, hier sind zunächst zu überprüfen:

  1. Stellen Sie sicher, das Kind Modul Laden ist zuerst. In meinem Fall musste ich sicherstellen, dass sich das Kindmodul physisch vor meinem Elternmodul befand. Sie können dies bestätigen, indem Sie für jede Modul-Init-Zeile einen Haltepunkt setzen.
  2. Auch bei korrekter physikalischer Reihenfolge war die Ausführungsreihenfolge noch aus. Eines meiner Module war in eine selbstausführende Funktion eingebunden, das andere nicht. Do.
  3. In der untergeordneten Funktion ist ein Fehler aufgetreten, der dazu führte, dass dieser Fehler in der Konsole zweimal angezeigt wurde. Dies liegt daran, dass ich eine Syntax wie folgt verwendet werden:

    var mod = angular.module("blah", []); 
    mod.filter("filterName", function(){ ... }); 
    

    An einem Punkt I die leeren Klammern vergessen, wenn das Modul starten, so dass die Linie sah wie folgt aus und warf diese Störung:

    var mod = angular.module("blah"); // <-- wrong 
    

Zur Erinnerung: Stellen Sie sicher, dass das untergeordnete Modul zuerst ausgeführt wird und keine Fehler aufweist.

0

Übrigens verursacht die Verwendung von Angular 1.0.6 beim Laden von jQuery vor eckig (hartcodierte Skript-Tags), dass IE10 den Fehler "kein Modul" auslöst.

Die einzige Option, die ich finden konnte, um es zu korrigieren, ist manuell Bootstrap und sicherstellen, dass meine app.js, die das Modul definiert wurde nach allen anderen untergeordneten Modul Referenzen (wie Barnabas erwähnt) geladen.

0

Wir hatten das gleiche Problem nur in IE. Es wurde von einem Tippfehler verursacht (einige Katze auf der Tastatur verstärkt haben müssen):

<script type=" text/javascript" src="assets/js/app.js"></script> 

das führende Leerzeichen in dem Wert des Typ-Attribut, das Problem verursacht wurde. Sobald es entfernt wurde, funktionierte die App wieder gut.

1
app.config(['$stateProvider', ($stateProvider) => { 
    $stateProvider.state('login', { 
    url: '/login', 
    templateUrl: 'partials/login.html' 
    }).state('dashboard', { 
    url: '/dashboard', 
    templateUrl: 'partials/dashboard.html' 
    }) 
}]) 

In meinem Fall mochte Internet Explorer die Pfeilfunktionen nicht. Das Ändern dieser in Funktion() {} Notation hat das Problem behoben: