Injecteur AngularJS 1.2 $: module

445

Lorsque vous utilisez angulaire 1.2 au lieu de 1.07, le code suivant n'est plus valide, pourquoi?

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

le problème est dans la partie configuration de l'injecteur (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)

Si je me souviens bien, ce problème a commencé avec 1.1.6 angulaire.

javascript angularjs shoen
la source

636

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

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

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

shoen
la source

492

Si vous n'êtes pas sûr du module manquant, utilisez le fichier angular.js non minifié qui donne un message d'erreur lisible:

"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, j'utilise bower, et il fournit des fichiers .map - je me demande pourquoi Chrome me montrait toujours des erreurs du fichier minifié. Merci pour l'avertissement, @Mart!

Aditya MP

5

@ arg20, vous trouverez la réponse ici: github.com/angular/angular.js/commit/…

Laurent

4

Sainte vache, j'ai cherché PARTOUT où trouver la solution. Je suis passé de 1.0 à 1.2 et j'ai eu cette erreur. Le seul conseil que j'ai pu trouver est de s'assurer que angular-route.js était inclus, ce qui était ... Pas un fan des documents angulaires. En tout cas merci! J'ai voté positivement.

RachelD

4

Vous pouvez obtenir cette erreur si vous utilisez angular.module ('myModule') au lieu de angular.module ('myModule', []) lors de la définition de votre module. stackoverflow.com/questions/16260538/…

Anirudhan J

42

mon erreur a disparu en ajoutant ce '()' à la fin

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

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

arp
la source

40

Une dernière chose à ajouter à la liste car c'est le premier résultat qui aboutit à une recherche google de «Erreur: [$ injector: modulerr] angular»:

Si vous avez un décalage entre le nom de votre application dans votre 'index'html' et dans la définition de votre application javascript principale, cela peut également générer cette erreur.

Par exemple, si votre code HTML ressemble à ceci:

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

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

        etc ...

Et votre JavaScript ressemble à ceci (c'est-à-dire qu'il a une faute de frappe sur le nom de l'application - myWebCite au lieu de myWebSite):

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

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

alors l'erreur "Erreur: [$ injector: modulerr] angular" sera également générée.

Mick
la source

J'étais très proche de ça. J'avais réglé le ng-app = "app" ... et puis jamais configuré un module. C'était donc le déclenchement de l'erreur. En tant que débutant, je viens de supprimer l'élément = "app" pour que mon exemple de code fonctionne. Plus tard, j'ai configuré le module et le routage appropriés ... :)

Eric Burdo

25

Une erreur noob peut être oublier d'inclure le module js

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

fichiers dans le index.html du tout

autreDewi
la source

24

Incroyable à quel point les messages de débogage / d'erreur sont anguleux.

K - La toxicité du SO augmente.

3

LOL. Je me suis dit non, je ne peux pas faire cette simple erreur. Et j'ai passé votre réponse plusieurs fois. Mais cela a résolu mon problème.

Maubeh

Il s'agit d'une importation manquante

famas23

13

Pour ceux qui utilisent des frameworks qui compressent, regroupent et réduisent les fichiers, assurez-vous de définir explicitement chaque dépendance car ces frameworks ont tendance à renommer vos variables. Cela m'est arrivé lors de l'utilisation d'ASP.NET BundleConfig.cspour regrouper mes scripts d'application.

Avant

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

Après

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

En savoir plus ici sur l'annotation de dépendance angulaire.

Moses Machua
la source

12

Si vous avez cette erreur dans la console ([$injector:nomod], MINERR_ASSET:22), assurez-vous de ne pas inclure votre code d'application avant de chargerAngularJS

Je faisais cela et une fois que j'ai fixé la commande, l'erreur a disparu.

Jasdeep Singh
la source

9

Je viens de rencontrer la même erreur, dans mon cas, elle est due au fait que le deuxième paramètre angular.moduleest manquant - j'espère que cela peut aider quelqu'un avec le même problème.

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

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

Anth12
la source

1

C'était mon problème; Il me manquait une déclaration de angular.module ('my.Namespace', []); avant d'utiliser angular.module ('my.Namespace'). directive ('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
la source

Vous avez oublié que vous devez inclure src lors de l'utilisation de dépendances spécifiques!

K - La toxicité du SO augmente.

6

J'ai eu le même problème et j'ai essayé toutes les solutions possibles. Mais finalement, j'ai appris grâce à la documentation que le ngRoutemodule est maintenant séparé. Jetez un œil à ce lien

Solution: ajoutez le cdn angular-route.js après le script angular.min.js

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

5

Un autre déclencheur de cette erreur est de quitter le "." avant votre "sinon" ou tout autre itinéraire dans votre définition d'itinéraire:

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

Mortifié par un point final, encore une fois. Je dois aimer JS!

Hilary
la source

4

Outre la réponse ci-dessous, si vous avez cette erreur dans la console ( [$injector:nomod], MINERR_ASSET:22), mais que tout semble bien fonctionner, assurez-vous que vous n'avez pas d' inclusions en double dans votre index.html.

Parce que cette erreur peut également être déclenchée si vous avez des inclusions en double des fichiers, qui utilisent ce module et sont incluses avant le fichier avec la déclaration de module réelle.

pleerock
la source

3

Si vous passez par le tutoriel officiel d'angularjs https://docs.angularjs.org/tutorial/step_07

Remarque: à partir d'AngularJS version 1.2, ngRoute est dans son propre module et doit être chargé en chargeant le fichier angular-route.js supplémentaire, que nous téléchargeons via Bower ci-dessus.

Veuillez également noter de ngRoute api https://docs.angularjs.org/api/ngRoute

Installation Incluez d'abord angular-route.js dans votre HTML:

Vous pouvez télécharger ce fichier aux endroits suivants:

Google CDN par exemple //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower par exemple bower install angular-route @ XYZ code.angularjs.org par exemple "//code.angularjs.org/XYZ/ angular-route.js "où XYZ est la version AngularJS que vous utilisez.

Chargez ensuite le module dans votre application en l'ajoutant en tant que module dépendant:

angular.module ('app', ['ngRoute']); Avec cela, vous êtes prêt à commencer!

zahid9i
la source

2

John Papa a fourni mon problème sur ce commentaire plutôt obscur: Parfois, lorsque vous obtenez cette erreur, cela signifie qu'il vous manque un fichier. D'autres fois, cela signifie que le module a été défini après son utilisation. Une façon de résoudre ce problème est de nommer les fichiers de module * .module.js et de les charger en premier.

Josh
la source

0

Mon problème était dans le config.xml. En changeant:

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

à

<access origin="*"/>

l'a corrigé.

Frank Conry
la source

0

C'est une erreur d'injecteur. Vous devrez peut-être utiliser beaucoup de fichiers JavaScript, de sorte que l'injecteur peut être manquant.

Certains sont ici:

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

Veuillez vérifier l'injecteur que vous devez insérer dans votre app.js

Bipin Shilpakar
la source

0

Parfois, j'ai vu cette erreur lorsque vous basculez entre les projets et exécutez les projets sur le même port l'un après l'autre. Dans ce cas goto chrome Outils de développement> Réseau et essayer de vérifier le fichier js écrit réel pour: if the file match with the workspce. Pour résoudre ce problème, sélectionnez Disable Cachesous réseau.

Shashi Ranjan
la source

0

Après plusieurs mois, je suis revenu pour développer une application AngularJS ( 1.6.4 ), pour laquelle j'ai choisi Chrome (PC) et Safari (MAC) pour les tests pendant le développement. Ce code présente cette erreur: $ injector: module Module Error sur IE 11.0.9600 (Windows 7, 32 bits).

Après enquête, il est devenu clair que l'erreur était due à l' utilisation de la boucle forEach , juste remplacé toutes les boucles forEach par des boucles normales pour que les choses fonctionnent telles quelles ...

C'était essentiellement un problème IE11 (répondu ici ) plutôt qu'un problème AngularJS, mais je veux mettre cette réponse ici parce que l'exception soulevée était une exception AngularJS. J'espère que cela pourrait aider certains d'entre nous.

De même. n'utilisez pas les fonctions lambda ... remplacez simplement () => {...} par une bonne vieille fonction () {...}

Akber Iqbal
la source

0

J'ai eu ce problème et après avoir vérifié mon code ligne par ligne, j'ai vu cela

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

je viens de le changer en

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

et ça a marché. alors vérifiez vos balises.

Aref Bozorgmehr
la source

Injecteur AngularJS 1.2 $: module

Réponses: