Iniettore AngularJS 1.2 $: modulerr

445

Quando si utilizza l'angolare 1.2 anziché 1.07 il seguente codice non è più valido, perché?

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

il problema si trova nella parte di configurazione dell'iniettore (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)

Se ricordo bene questo problema è iniziato con la versione 1.1.6.

javascript angularjs

— Shoen
fonte

636

Il problema è stato causato dalla mancata inclusione del modulo ngRoute. Dalla versione 1.1.6 è una parte separata:

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

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

— Shoen
fonte

492

Se non si è sicuri del modulo mancante, utilizzare angular.js non minimizzato che fornisce un messaggio di errore leggibile:

"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, sto usando bower e fornisce file .map - mi chiedo perché Chrome mi stesse ancora mostrando errori dal file minimizzato. Grazie per il testa a testa, @Mart!

— Aditya MP,

5

@ arg20, troverai la risposta qui: github.com/angular/angular.js/commit/…

— Laurent

4

Vacca sacra Ho cercato OVUNQUE la soluzione a questo. Ho aggiornato da 1.0 a 1.2 e ho riscontrato questo errore. L'unico consiglio che ho trovato è stato quello di assicurarmi che angular-route.js fosse incluso, cosa che ... Non è un fan dei documenti angolari. Comunque grazie! Ho votato a favore.

— RachelD,

4

È possibile che venga visualizzato questo errore se si utilizza angular.module ('myModule') anziché angular.module ('myModule', []) durante la definizione del modulo. stackoverflow.com/questions/16260538/...

— Anirudhan J

42

il mio errore è scomparso aggiungendo questo '()' alla fine

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

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

— arp
fonte

40

Un'altra cosa da aggiungere all'elenco in quanto questo è il primo risultato che viene fornito con una ricerca su Google di "Errore: [$ injector: modulerr] angolare":

Se si riscontra una discrepanza tra il nome dell'app nel 'index'html' e nella definizione dell'app javascript principale, anche questo può generare questo errore.

Ad esempio se il tuo HTML è simile al seguente:

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

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

        etc ...

E il tuo JavaScript è simile al seguente (cioè ha un refuso sul nome dell'app - myWebCite anziché myWebSite):

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

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

quindi verrà generato anche l'errore "Errore: [$ injector: modulerr] angolare".

— Mick
fonte

Mi ero molto vicino a questo. Avevo impostato ng-app = "app" ... e quindi non ho mai impostato un modulo. Quindi stava facendo scattare l'errore. Come principiante, ho appena rimosso il pezzo = "app" per far funzionare il mio codice di esempio. Più tardi, ho installato il modulo corretto e il routing ... :)

— Eric Burdo,

25

Un errore noob può essere dimenticato di includere il modulo js

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

file in index.html affatto

— otherDewi
fonte

24

Incredibile quanto i messaggi di errore / debugging siano angolari.

— K - La tossicità in SO sta crescendo.

3

LOL. Ho detto a me stesso, no, non posso fare questo semplice errore. E ho passato la tua risposta più volte. Ma ha risolto il mio problema.

— Maubeh,

Si tratta di alcune importazioni mancanti

— famas23

13

Per coloro che usano framework che comprimono, raggruppano e minimizzano i file, assicurati di definire esplicitamente ogni dipendenza poiché questi framework tendono a rinominare le tue variabili. Mi è successo durante l'utilizzo di ASP.NET BundleConfig.csper raggruppare gli script delle mie app.

Prima

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

Dopo

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

Maggiori informazioni qui sull'annotazione della dipendenza angolare.

— Mosè Machua
fonte

12

Se si riscontra questo errore nella console ([$injector:nomod], MINERR_ASSET:22), assicurarsi di non includere il codice dell'applicazione prima di caricareAngularJS

Lo stavo facendo e una volta risolto l'ordine, l'errore è scomparso.

— Jasdeep Singh
fonte

9

Ho appena riscontrato lo stesso errore, nel mio caso è stato causato dalla angular.modulemancanza del secondo parametro, si spera che ciò possa aiutare qualcuno con lo stesso problema.

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

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

— Anth12
fonte

1

Questo era il mio problema; Mi mancava una dichiarazione di angular.module ('my.Namespace', []); prima di usare angular.module ('my.Namespace'). direttiva ('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
fonte

Hai dimenticato che devi includere src quando usi dipendenze specifiche!

— K - La tossicità in SO sta crescendo.

6

Ho avuto lo stesso problema e ho provato tutte le possibili soluzioni. Ma finalmente sono venuto a sapere dalla documentazione che il ngRoutemodulo è ora separato. Dai un'occhiata a questo link

Soluzione: aggiungere lo script cdn angular-route.js dopo 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
fonte

5

Un altro trigger per questo errore sta lasciando il "." prima del "altrimenti" o di qualsiasi altro percorso nella definizione del percorso:

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

Mortificato da un punto fermo, ancora una volta. Devi amare JS!

— Hilary
fonte

4

Oltre alla risposta di seguito, se si verifica questo errore nella console ( [$injector:nomod], MINERR_ASSET:22), ma tutto sembra funzionare correttamente, assicurarsi di non averlo includere duplicati nel file index.html.

Perché questo errore può anche essere generato se si includono duplicati di inclusioni dei file, che utilizzano questo modulo e sono inclusi prima del file con la dichiarazione del modulo effettivo.

— pleerock
fonte

3

Se segui il tutorial ufficiale di angularjs https://docs.angularjs.org/tutorial/step_07

Nota: a partire da AngularJS versione 1.2, ngRoute è nel suo modulo e deve essere caricato caricando il file angular-route.js aggiuntivo, che scarichiamo tramite Bower sopra.

Nota inoltre da ngRoute api https://docs.angularjs.org/api/ngRoute

Installazione Per prima cosa includi angular-route.js nel tuo HTML:

È possibile scaricare questo file dai seguenti luoghi:

Google CDN ad es. //Ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower ad es. Bower installa angular-route @ XYZ code.angularjs.org ad es. "//Code.angularjs.org/XYZ/ angular-route.js "dove XYZ è la versione di AngularJS in esecuzione.

Quindi caricare il modulo nell'applicazione aggiungendolo come modulo dipendente:

angular.module ('app', ['ngRoute']); Con quello sei pronto per iniziare!

— zahid9i
fonte

2

John Papa ha fornito il mio problema su questo commento piuttosto oscuro: a volte quando si ottiene quell'errore, significa che manca un file. Altre volte significa che il modulo è stato definito dopo essere stato utilizzato. Un modo per risolverlo facilmente è nominare i file del modulo * .module.js e caricarli per primi.

— Josh
fonte

0

Il mio problema era nel file config.xml. Mutevole:

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

per

<access origin="*"/>

aggiustato.

— Frank Conry
fonte

0

È un errore dell'iniettore. Potresti aver usato molti file JavaScript, quindi l'iniettore potrebbe mancare.

Alcuni sono qui:

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

Si prega di controllare l'iniettore che è necessario inserire nel proprio app.js

— Bipin Shilpakar
fonte

0

A volte ho visto questo errore quando si passa da un progetto all'altro e si eseguono i progetti sulla stessa porta uno dopo l'altro. In tal caso goto Strumenti Chrome Developer> Rete e cercare di controllare il file js scritta effettivo per: if the file match with the workspce. Per risolvere questo, selezionare Disable Cachesotto rete.

— Shashi Ranjan
fonte

0

Dopo molti mesi, sono tornato a sviluppare un'app AngularJS ( 1.6.4 ), per la quale ho scelto Chrome (PC) e Safari (MAC) per i test durante lo sviluppo. Questo codice presentava questo errore: $ injector: modulerr Module Error su IE 11.0.9600 (Windows 7, 32-bit).

All'indagine , è diventato chiaro che l'errore era dovuto all'uso di ogni ciclo forEach , ha appena sostituito tutti i loop forEach con normali per loop affinché le cose funzionino così come sono ...

Fondamentalmente si trattava di un problema di IE11 ( qui risposto ) piuttosto che di un problema di AngularJS, ma voglio inserire questa risposta perché l'eccezione sollevata era un'eccezione di AngularJS. Spero che possa aiutare alcuni di noi là fuori.

allo stesso modo. non usare le funzioni lambda ... basta sostituire () => {...} con una buona funzione () {...}

— Akber Iqbal
fonte

0

Ho avuto questo problema e dopo aver controllato il mio codice riga per riga ho visto questo

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

l'ho appena cambiato in

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

ed ha funzionato. quindi controlla i tuoi tag.

— Aref Bozorgmehr
fonte