web-dev-qa-db-fra.com

Angular Erreur JS Uncaught: [$ injector: modulerr]

J'ai un problème avec Angular JS recevant une erreur: Erreur non capturée: [$ injector: modulerr]. Mon fichier JS ressemble

angular.module('MyApp', ['ngRoute']);
angular.module('MyApp',['ngResource']);
function TwitterCtrl($scope,$resource){
}

J'ai aussi inclus angular-route-js

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

La documentation angulaire indique que le problème est http://docs.angularjs.org/api/ngRoute

javascriptangularjsroutes
48
ig-melnyk

Essayez d'ajouter ceci:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
45
Lauri Elias

En développement, je vous recommande d'utiliser distributives non minifiées: Et toutes les erreurs deviennent plus informatives! Au lieu de cela angular.min.js utilise angular.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">
37
ulmer-morozov

Essayez d'ajouter:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">

et:

angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}

Vous ne devez appeler angular.module qu'une seule fois avec toutes les dépendances, car avec votre code actuel, vous créez un nouveau module MyApp écrasant le précédent.

De documentation angulaire :

Attention, l'utilisation de angular.module ('myModule', []) créera le module myModule et écrasera tout module existant nommé myModule. Utilisez angular.module ('myModule') pour récupérer un module existant.

34
Khanh TO

Assurez-vous que votre fonction est entourée d'une fermeture, complétée par l'extra () à la fin:

(function(){                                                                     

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


})();
12
ContextSwitch

Auparavant, j'avais le même problème, mais je me suis rendu compte que je n'avais pas inclus "app.js" (l'application principale) dans ma page principale (index.html). Ainsi, même lorsque vous incluez toutes les dépendances requises par AngularJS, vous pouvez vous retrouver avec cette erreur dans la console. Veillez donc toujours à inclure les fichiers nécessaires dans votre page principale et vous ne devriez pas avoir ce problème.

J'espère que cela t'aides.

6
AllJs

Le problème était dû à l'absence d'inclusion du module ngRoute. Depuis la version 1.1.6, c'est une partie séparée:

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

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

Cela devient référence à partir de: AngularJS 1.2 $ injector: modulerr David answer

4
Arun Sharma

J'ai eu cette erreur parce que j'avais une dépendance sur un autre module qui n'était pas chargé.

angular.module ("app", ["kendo.directives"]]). contrôleur ("MyCtrl", function () {} ...

donc même si j'avais tous les Angular modules, je n'avais pas le kendo.

4
Sibele Lima

J'ai eu le même problème. Vous devriez taper votre code Angular js en dehors de toute fonction comme celle-ci:

$( document ).ready(function() {});
4
Julia

Assurez-vous que la variable qui contient votre angular.module est correctement structurée.

Cela échouera avec "Erreur non capturée: [$ injector: modulerr]":

var angApp = angular.module("angApp");

Cela marche:

var angApp = angular.module("angApp", []);

C'est sournois, car le message d'erreur ne pointe pas vers une chose en particulier (donc la grande variété de réponses). De plus, la plupart des js linters ne verront pas les détails. Persévère!

3
isaacdre

J'ai eu exactement le même problème et ce qui l'a résolu à enlever la fermeture:

$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){
        ...
    });
});

devient:

var app = angular.module("myApp", []); 
app.controller('myController', function(){
    ...
});
2
L01c

ok si vous obtenez un Uncaught Error: [$injector:modulerr] et que le module angular est dans l'erreur qui vous indique que vous avez un module ng-app en double.

2
Herb Williams

L'erreur signifie que l'injecteur de dépendance n'a pas pu localiser la dépendance 'ngResource'. La balise de script dans la réponse acceptée fournit cette dépendance.

Vous obtiendrez également la même erreur si vous ajoutez des modules personnalisés dans les dépendances sans ajouter la balise de script pour inclure le fichier '.js' contenant la dépendance.

1
Chandan Gupta

J'ai également eu le même problème, je viens de supprimer la ligne de code suivante du fichier BundleConfig.cs et mon code fonctionne bien.

BundleTable.EnableOptimizations = true;

1
Kamalakar Chavan

J’ai simplement ajouté ceci au cas où cela aiderait, j’avais ce problème et la raison en était que, lorsque j’ai regroupé mes données Angular, j'ai référencé le fichier principal de l'application sous le nom "AngularWebApp" au lieu de "AngularWebApp.js", J'espère que cela t'aides.

1
Trevor Hart

Ne chargez pas le code javascript dans la balise script cdn link. Utilisez une balise script distincte pour charger les scripts AngularJs. J'ai eu le même problème, mais j'ai créé un <script> séparé puis l'erreur a disparu.

0
user9359822