Injetor AngularJS 1.2 $: modulerr

445

Ao usar o angular 1.2 em vez de 1.07, o seguinte trecho de código não é mais válido, por quê?

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

o problema está na parte de configuração do injetor (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 bem me lembro, esse problema começou com o angular 1.1.6.

javascript  angularjs 
— shoen
fonte

Respostas:

636

O problema foi causado pela falta de inclusão do módulo ngRoute. Desde a versão 1.1.6, é uma parte separada:

<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 você não tem certeza de qual módulo está faltando, use os angularjs não minified que dá uma mensagem de erro legível:"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, estou usando o bower e ele fornece arquivos .map - eu me pergunto por que o Chrome ainda estava me mostrando erros no arquivo compactado. Obrigado pelo aviso, @Mart!
— Aditya MP
5
@ arg20, você encontrará a resposta aqui: github.com/angular/angular.js/commit/…
— Laurent
4
Vaca sagrada, eu tenho procurado EM TODA PARTE a solução para isso. Atualizei de 1.0 para 1.2 e recebi este erro. O único conselho que pude encontrar é garantir que o angular-route.js esteja incluído, o que era ... Não é um fã dos documentos do Angular. De qualquer forma, obrigado! Eu votei.
— RachelD
4
Você pode receber esse erro se usar angular.module ('myModule') em vez de angular.module ('myModule', []) ao definir seu módulo. stackoverflow.com/questions/16260538/…
— Anirudhan J
42

meu erro desapareceu adicionando '()' no final

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

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

Mais uma coisa a acrescentar à lista, pois este é o primeiro resultado que surge com uma pesquisa no Google de 'Erro: [$ injector: modulerr] angular':

Se houver uma incompatibilidade entre o nome do seu aplicativo no seu 'index'html' e na definição principal do seu aplicativo javascript, isso também poderá gerar esse erro.

Por exemplo, se o seu HTML estiver assim:

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

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

        etc ...

E seu JavaScript se parece com isso (ou seja, tem um erro de digitação no nome do aplicativo - myWebCite em vez de myWebSite):

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

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

o erro 'Error: [$ injector: modulerr] angular' também será gerado.

— Mick
fonte
Eu tinha muito perto disso. Eu havia definido o ng-app = "app" ... e nunca configurou um módulo. Por isso, estava disparando o erro. Como iniciante, acabei de remover a parte = "app" para obter meu código de exemplo funcionando. Mais tarde, eu configurar o módulo apropriado e roteamento ... :)
— Eric Burdo
25

Um erro noob pode estar esquecendo de incluir o módulo js 

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

arquivos no index.html em tudo

— otherDewi
fonte
24
Incrível o quão ruim as mensagens de depuração / erro são angulares.
— K - A toxicidade no SO está crescendo.
3
RI MUITO. Eu disse para mim mesmo, não, não posso cometer este erro simples. E eu passei sua resposta várias vezes. Mas isso resolveu meu problema.
— Maubeh
Trata-se de alguma importância em falta
— famas23
13

Para aqueles que usam estruturas que compactam, agrupam e minificam arquivos, defina explicitamente cada dependência, pois essas estruturas tendem a renomear suas variáveis. Isso aconteceu comigo ao usar o ASP.NET BundleConfig.cspara agrupar meus scripts de aplicativos.

Antes

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

Depois de

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

Leia mais aqui sobre Anotação de Dependência Angular.

— Moses Machua
fonte
12

Se você tiver esse erro no console ([$injector:nomod], MINERR_ASSET:22), verifique se não está incluindo o código do aplicativo antes de carregarAngularJS

Eu estava fazendo isso e, depois de corrigir o pedido, o erro desapareceu.

— Jasdeep Singh
fonte
9

Acabei de experimentar o mesmo erro, no meu caso, foi causado pelo segundo parâmetro em angular.modulefalta - espero que isso ajude alguém com o mesmo problema.

angular.module('MyApp');

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

— Anth12
fonte
1
Este foi o meu problema; Estava faltando uma declaração de angular.module ('my.Namespace', []); antes de usar angular.module ('my.Namespace'). Directive ('myDirective', [...
— ScottFoster1000
6

Eu tive o mesmo problema e tentei todas as soluções possíveis. Mas, finalmente, soube pela documentação que o ngRoutemódulo agora está separado. Dê uma olhada neste link

Solução: adicione o script cdn angular-route.js após o 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

Outro gatilho para esse erro está saindo do "." antes de seu "caso contrário" ou qualquer outra rota na sua definição de rota:

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

Mortificado por um ponto final, mais uma vez. Conseguiu amar JS!

— Hilary
fonte
4

Além da resposta abaixo, se você tiver esse erro no console ( [$injector:nomod], MINERR_ASSET:22), mas tudo parece funcionar bem, verifique se você não possui inclusões duplicadas no seu index.html.

Como esse erro também pode ser gerado se você tiver inclusões duplicadas dos arquivos, que usam este módulo e forem incluídas antes do arquivo com a declaração real do módulo.

— pleerock
fonte
3

Se você seguir o tutorial oficial do angularjs https://docs.angularjs.org/tutorial/step_07

Nota: A partir da versão 1.2 do AngularJS, o ngRoute está em seu próprio módulo e deve ser carregado carregando o arquivo angular-route.js adicional, que baixamos via Bower acima.

Observe também no ngRoute api https://docs.angularjs.org/api/ngRoute

Instalação Primeiro, inclua angular-route.js no seu HTML:

Você pode baixar este arquivo nos seguintes locais:

CDN do Google, por exemplo, //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower, por exemplo, bower instala rota angular @ XYZ code.angularjs.org, por exemplo, "//code.angularjs.org/XYZ/ angular-route.js ", em que XYZ é a versão do AngularJS que você está executando.

Em seguida, carregue o módulo no seu aplicativo, adicionando-o como um módulo dependente:

angular.module ('app', ['ngRoute']); Com isso, você está pronto para começar!

— zahid9i
fonte
2

John Papa forneceu meu problema com esse comentário bastante obscuro: às vezes, quando você recebe esse erro, significa que está faltando um arquivo. Outras vezes, significa que o módulo foi definido após ser usado. Uma maneira de resolver isso facilmente é nomear os arquivos do módulo * .module.js e carregá-los primeiro.

— Josh
fonte
0

Meu problema estava no config.xml. Alterando:

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

para

<access origin="*"/>

consertou.

— Frank Conry
fonte
0

É um erro do injetor. Você pode usar muitos arquivos JavaScript para que o injetor esteja ausente.

Alguns estão aqui: 

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

Por favor, verifique o injetor que você precisa inserir no seu app.js

— Bipin Shilpakar
fonte
0

Em algum momento, vi esse erro quando você alternava entre os projetos e os executava na mesma porta, um após o outro. Nesse caso Goto Chrome Developer Tools> Rede e tentar verificar o arquivo escrito js real para: if the file match with the workspce. Para resolver isso, selecione Disable Cacheem rede.

— Shashi Ranjan
fonte
0

Depois de muitos meses, voltei a desenvolver um aplicativo AngularJS ( 1.6.4 ), para o qual escolhi o Chrome (PC) e o Safari (MAC) para testar durante o desenvolvimento. Este código apresentou este erro: $ injector: modulerr Erro do módulo no IE 11.0.9600 (Windows 7, 32 bits).

Após a investigação, ficou claro que o erro ocorreu devido ao uso do loop forEach , apenas substituindo todos os loops forEach pelo normal para loops, para que as coisas funcionassem como estão ...

Era basicamente um problema do IE11 (respondido aqui ) em vez de um problema do AngularJS, mas quero colocar essa resposta aqui porque a exceção gerada foi uma exceção do AngularJS. Espero que ajude alguns de nós por aí.

similarmente. não use funções lambda ... basta substituir () => {...} a função ol 'good () {...}

— Akber Iqbal
fonte
0

Eu tive esse problema e depois de verificar meu código linha por linha, vi isso

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

eu mudei para 

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

e deu certo. então verifique suas tags.

— Aref Bozorgmehr
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.