web-dev-qa-db-fra.com

AngularJS 1.2 $ injector: modulerr

Lorsque vous utilisez 1.2 angulaire 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 se trouve dans la partie relative à la 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.

javascriptangularjs
440
Dawid

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

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

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

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

Encore une chose à ajouter à la liste car c’est le premier résultat qui donne une recherche google de 'Erreur: [$ injector: modulerr] angular':

Si vous avez une différence entre le nom de votre application dans votre 'index'html' et dans la définition principale de votre application javascript, ceci 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 une typo 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.

40
Mick

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

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

des fichiers dans le fichier index.html

23
otherDewi

Pour ceux qui utilisent des cadres qui compressent, regroupent et réduisent des fichiers, assurez-vous de définir chaque dépendance de manière explicite, car ces cadres ont tendance à renommer vos variables. Cela m'est arrivé lors de l'utilisation de ASP.NET BundleConfig.cs pour 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: '/'
      });
}]);

Lire la suite ici à propos de l'annotation de dépendance angulaire.

13
Moses Machua

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

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

12
Jasdeep Singh
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' ]);
7
SirajuddinLuck

J'ai eu le même problème et j'ai essayé toutes les solutions possibles. Mais finalement, la documentation m'a appris que le module ngRoute est maintenant séparé. Jetez un coup d'œil à ceci link

Solution: Ajoutez le script 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>
6
Bastin Robin

Un autre déclencheur de cette erreur est de laisser 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 arrêt complet, encore une fois. Je dois aimer JS!

5
Hilary

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

Étant donné que cette erreur peut également être générée si vous avez des doublons d'inclusion des fichiers, ceux-ci utilisent ce module et sont inclus avant le fichier avec la déclaration de module réelle.

4
pleerock

Si vous suivez le tutoriel officiel de angularjs https://docs.angularjs.org/tutorial/step_07

Remarque: à partir de la version 1.2 d'AngularJS, ngRoute est unique module et doit être chargé en chargeant le complément angular-route.js fichier que nous téléchargeons via Bower ci-dessus.

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

Installation Commencez par inclure angular-route.js dans votre code HTML:

Vous pouvez téléchargez ce fichier depuis les emplacements suivants:

Google CDN par exemple . //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js Bower par exemple. bower installez [email protected] code.angularjs.org par exemple . "//code.angularjs.org/X.Y.Z/angular-route.js" où X.Y.Z est le AngularJS version que vous utilisez.

Chargez ensuite le module dans votre application en l'ajoutant en tant que personne à charge module:

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

3
zahid9i

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

2
Josh

J'ai parfois vu cette erreur lorsque vous passez d'un projet à l'autre et que vous exécutez les projets sur le même port l'un après l'autre. Dans ce cas, allez dans chrome Outils de développement> Réseau et essayez de vérifier le fichier js réel écrit pour: if the file match with the workspce. Pour résoudre ce problème, sélectionnez Disable Cache sous réseau.

0
Shashi Ranjan

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

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

à

<access Origin="*"/>

corrigé.

0
Frank Conry

C'est une erreur d'injecteur. Vous avez peut-être utilisé beaucoup de fichiers JavaScript et l'injecteur est peut-être absent. 

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

0
Bipin Shilpakar