$ Injektor: modulerr Fehler im IE 11 Verwenden AngularJS

Ich habe eine AngularJS App entwickelt und es funktioniert auf Firefox, Opera, Safari, Edge und Chrome, aber es wird auf IE nicht funktioniert 11.

Hier die spezifische Fehlermeldung bekomme ich beim Öffnen der App in IE 11:

[$injector:modulerr] Failed to instantiate module TicketSystemApp due to: Error: [$injector:modulerr] Failed to instantiate module TicketSystemControllers due to: Error: [$injector:nomod] Module 'TicketSystemControllers' is not available! You either misspelled the module name or forgot to load it.

Es scheint wie meine Modul-App wird nicht geladen.

Hier ist meine gesamte Skript Last:

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<!-- Angular js --> 
<script src= "js/angular.min.js"></script> 
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script> 
<!-- Angular Material Library --> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script> 
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script> 
<script src="js/angular-ui-router.js"></script> 
<script src="js/md-data-table.min.js"></script> 
<script src="js/toArrayFilter.js"></script> 
<!-- auto-scroll module --> 
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script> 

<script src = "js/app.js"></script> 
<!-- Controllers --> 
<script src = "js/controllers.js"></script> 
<script src ="js/globalFunctions.js"></script> 
<!-- Custom File Upload Angular --> 
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support --> 
<script src="js/ng-file-upload.min.js"></script> 
<!-- FACTORY --> 
<script src = "js/authInterceptor.js"></script> 


<!-- Services --> 
<script src="js/auth.js"></script> 
<script src="js/session.js"></script> 

<!-- loading bar --> 
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>

ich diesen Tag in als meine html habe:

<html lang="en" ng-app="TicketSystemApp" xmlns:ng="http://angularjs.org" class="ng-app:TicketSystemApp" id="ng-app">

Und ich diesen Tag in meinem Kopf zu tun habe:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Ich habe manuell versucht, Bootstrapping, aber ich bekomme nur die gleiche Fehlermeldung messa ge doppelt.

Hier ist meine app.js (Nur die Initialisierung):

var TicketSystemApp = angular.module('TicketSystemApp',[ 
    'ngRoute', 
    'TicketSystemControllers', 
    'angular-loading-bar', 
    'ngAnimate', 
    'ui.router', 
    'ui.bootstrap', 
    'ngMaterial', 
    'md.data.table', 
    'angular-toArrayFilter' 
]);

Hier mein controller.js ist (nur die Initialisierung). Ich benutze diese alle Controller enthalten Modul:

var TicketSystemControllers = angular.module('TicketSystemControllers',[ 
    'ngRoute', 
    'ui.router', 
    'ui.bootstrap', 
    'angular-loading-bar', 
    'ngAnimate', 
    'ngMaterial', 
    'ngMessages', 
    'ngFileUpload', 
    'md.data.table', 
    'bootstrapLightbox', 
    'luegg.directives' 

    ]);

Quelle

2016-06-03 Kenta Goto

Wir können nichts diagnostizieren, wenn Sie uns Ihre JS nicht zeigen. Bitte fügen Sie die Quelle für "TicketSystemApp" ein und überlegen Sie, alle zusätzlichen HTML/JS-Tags, die nicht relevant sind, zu entfernen. –

Verwenden Sie während des Debuggens auch die nicht-miniierte Version von angular.js, damit Sie detailliertere Fehlermeldungen erhalten. – Lex

Harris, ich habe meine app.js aufgenommen. Lex, danke für den Rat. –

Sie den Controller laden, bevor Sie das Winkelmodul

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

erklären Wenn Sie den Auftrag zu

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

ändern sollte es funktioniert .

Vielleicht das gleiche mit toArrayFilter.js?

Sie müssen sicher sein, dass die Moduldefinition erstellt wird, bevor Sie einige Controller, Anweisungen oder Fabriken laden !!!

Quelle

2016-06-03 18:36:07

Früher war es so. Ich denke, es hat etwas mit der Reihenfolge der Skripte zu tun, aber ich kann es nicht herausfinden. Ich habe Dinge hin und her bewegt. Gleicher Fehler obwohl –

Kenta, es sieht so aus, als würden Sie überhaupt keinen Controller erstellen. Was Sie getan haben, ist zwei Module erstellt, ist das Ihre Absicht? Wenn das der Fall ist, müssen Sie Ihre Skripts neu anpassen und sicherstellen, dass der Cache gelöscht wird. IE 11 hat ein grausames Caching-Problem. Ihre Skripte sollten auf diese Weise bestellt werden.

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

Auch ich habe festgestellt, Sie haben eine globale Funktionen-Datei. Diese Datei sollte die erste sein, wenn Sie etwas in den anderen zwei Dateien haben, die darauf verweisen. Ich schlage vor, dass Sie Ihre Skripte so einstellen.

<script src= "js/angular.min.js"></script> 
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script> 
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script> 
<script src="js/angular-ui-router.js"></script> 
<script src="js/md-data-table.min.js"></script> 
<script src="js/toArrayFilter.js"></script> 
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script> 
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support --> 
<script src="js/ng-file-upload.min.js"></script> 
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script> 


<script src = "js/controllers.js"></script> 
<script src = "js/app.js"></script> 
<script src ="js/globalFunctions.js"></script> 
<script src="js/auth.js"></script> 
<script src="js/session.js"></script> 
<script src = "js/authInterceptor.js"></script>

Ich weiß nicht, ob dies die genaue Reihenfolge ist, wenn ich nicht alle Ihre JS sehen, aber ich nehme an, das ganz in der Nähe ist. Normalerweise möchten Sie alle Dateien, die Sie erstellen, in der richtigen Reihenfolge am unteren Rand Ihrer und aller Vendor-/3rd-Party-Dateien oben in der richtigen Reihenfolge.

Quelle

2016-06-03 18:56:18 Ohjay44

Das ist richtig Ohjay44, es ist meine Absicht, ein separates Modul zu erstellen, um mehrere Controller zu verwalten. Mir wurde geraten, dies zu tun, wenn ich diese App starte. Sie sehen ALLE meine Skripte. Wenn ich Ihren Code kopiere und einfüge, wird er nicht nur in IE 11 funktionieren, aber er wird nicht in allen modernen Browsern funktionieren. Ich habe es beide Wege getestet, wo controller.js vorher und nachher geladen wird. So oder so bekomme ich den gleichen Fehler. –

Kenta die Fehler, die Sie erhalten, sind aufgrund der Skripte Miss bestellt. Leider, ohne das über alles Bild zu sehen und zu wissen, was die Absichten jedes kundenspezifischen Skripts sind, macht es schwierig, für jemanden auf der Außenseite zu debuggen. Was die Verwendung eines separaten Moduls für Controller anbelangt, würde ich davon abraten, dass ich Sie auch auffordern würde, mehr von der direktiven Route als von der Controller-Route zu gehen. AngularJS soll als Komponenten (Direktiven) arbeiten. – Ohjay44

Kenta können Sie mir bitte sagen, ob GlobalFunctions, Auth, Session und AuthInterceptor irgendwelche Abhängigkeiten haben? Nutzen sie auch das Modul von app.js oder controllers.js? Wenn ja, müssen sie nach Controller und App kommen und ich kann meine Antwort anpassen, um das zu reflektieren. – Ohjay44

$ Injektor: modulerr Fehler im IE 11 Verwenden AngularJS

Antwort

Verwandte Themen