web-dev-qa-db-fra.com

AngularJS ne parvient pas à charger le module

EDIT: Cela ne se produit qu'avec IE (testé sur IE10)

J'ai une application qui se charge très bien au départ, cependant, une fois rafraîchi, il donne cette erreur:

SCRIPT5022: Pas de module: myAppModule

myAppModule est un module angulaire défini dans app.js qui est chargé après le chargement de angular.js

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

et est auto-amorcé via:

<html ng-app="myAppModule">

Les scripts sont chargés comme suit (pas de chargeur AMD):

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

Je pense que angularjs est chargé en premier et lance automatiquement l'application, mais app.js n'a pas encore été chargé

javascripthtml5angularjs
15
nehz

Ok, je ne sais pas pourquoi l’auto-amorçage échoue, mais si j’amorce manuellement l’application, cela fonctionne bien.

par exemple.

<html>

...

<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script>angular.bootstrap(document, ['myAppModule']);</script>
18
nehz

Je me sentais comme et idiot quand j'ai trouvé ce que je faisais mal, mais au cas où vous seriez comme moi, voici quelques autres points à vérifier en premier:

  1. Assurez-vous que le module enfant se charge en premier. Dans mon cas, je devais m'assurer que le module enfant était physiquement avant mon module parent. Vous pouvez le confirmer en plaçant un point d'arrêt sur chaque ligne d'initialisation du module.
  2. Même avec un ordre physique correct, l'ordre d'exécution était toujours désactivé. L'un de mes modules était encapsulé dans une fonction à exécution automatique, l'autre non. Doh.

  3. Il y a eu une erreur dans la fonction enfant qui a provoqué l'affichage de cette erreur deux fois dans la console. C'est parce que j'utilise une syntaxe comme celle-ci:

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

    A un moment, j'ai oublié les crochets vides lors du démarrage du module. La ligne ressemblait à ceci et renvoyait cette erreur:

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

Pour récapituler, assurez-vous que le module enfant s'exécute en premier et ne comporte aucune erreur.

6
Barnabas Kendall

J'ai eu ce même problème, seulement dans IE9. Les versions inférieures de IE ont en fait bien fonctionné, tout comme les nouveaux navigateurs. 

L'amorçage manuel a résolu le problème, mais une erreur "Fournisseur inconnu" a été renvoyée pour un filtre faisant partie de mon module. Notez que le filtre semblait toujours fonctionner comme prévu.

En fin de compte, la solution qui a résolu mon problème et mis fin aux erreurs générées était simplement de renommer le fichier du module pour qu'il soit identique à celui du module. 

Donc, si le nom de mon module était myAppModule, alors le nom du fichier devrait être myAppModule.js et non my_app_module.js.

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

Dans mon cas, Internet Explorer n'aimait pas les fonctions de flèche. Les changer en notation function () {} corrigeait le problème:

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

Nous avons eu le même problème seulement dans IE. Cela était dû à une faute de frappe (un chat a dû marcher sur le clavier):

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

Le premier espace dans la valeur de type-Attribute était à l'origine du problème. Dès qu'elle a été supprimée, l'application a à nouveau fonctionné correctement.

0
Volker Holz

A propos, en utilisant Angular 1.0.6, le chargement de jQuery avant angular (balises de script codées en dur) provoque IE10 pour générer l'erreur 'no Module'.

La seule option que j'ai pu trouver pour le corriger est de démarrer manuellement et de vérifier que mon app.js qui définit le module a été chargé après toutes les autres références de modules enfants (comme celle mentionnée par Barnabas).

0
Lukus