Inyector AngularJS 1.2 $: modulador

445

Cuando se usa angular 1.2 en lugar de 1.07, el siguiente código ya no es 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: '/'
        });
    }
]);

El problema está en la parte de configuración del inyector (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 no recuerdo mal, este problema comenzó con angular 1.1.6.

javascript angularjs Shoen
fuente

636

El problema fue causado por la falta de inclusión del módulo ngRoute. Desde la versión 1.1.6 es una 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
fuente

492

Si no está seguro de qué módulo se encuentra, usar los angularjs no minified lo que da un mensaje de error legible:

"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, estoy usando Bower, y proporciona archivos .map. Me pregunto por qué Chrome todavía me mostraba errores del archivo minificado. Gracias por el aviso, @Mart!

Aditya MP

55

@ arg20, encontrará la respuesta aquí: github.com/angular/angular.js/commit/…

Laurent

44

Santa vaca, he estado buscando POR TODAS PARTES la solución a esto. Actualicé de 1.0 a 1.2 y obtuve este error. El único consejo que pude encontrar es asegurarme de que se incluyera angular-route.js, que era ... No soy fanático de los documentos angulares. ¡Gracias de todas formas! He votado a favor.

RachelD

44

Puede obtener este error si usa angular.module ('myModule') en lugar de angular.module ('myModule', []) mientras define su módulo. stackoverflow.com/questions/16260538/…

Anirudhan J

42

mi error desapareció al agregar este '()' al final

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

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

arp
fuente

40

Una cosa más para agregar a la lista, ya que este es el primer resultado que surge con una búsqueda en Google de 'Error: [$ injector: modulelerr] angular':

Si tiene una discrepancia entre el nombre de su aplicación en su 'index'html' y en la definición principal de su aplicación javascript, esto también puede generar este error.

Por ejemplo, si su HTML se ve así:

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

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

        etc ...

Y su JavaScript se ve así (es decir, tiene un error tipográfico en el nombre de la aplicación: myWebCite en lugar de myWebSite):

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

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

entonces también se generará el error 'Error: [$ inyector: modulador] angular'.

Mick
fuente

Tenía muy cerca de esto. Había configurado ng-app = "app" ... y nunca configuré un módulo. Entonces estaba tropezando con el error. Como principiante, acabo de eliminar la pieza = "app" para que mi código de muestra funcione. Más tarde, configuré el módulo y el enrutamiento adecuados ... :)

Eric Burdo

25

Un error novato puede ser olvidar incluir el módulo js

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

archivos en el index.html en absoluto

otroDewi
fuente

24

Es sorprendente lo mal que están los mensajes de depuración / error en angular.

K - La toxicidad en SO está creciendo.

3

Jajaja Me dije a mí mismo, no, no puedo cometer este simple error. Y pasé tu respuesta varias veces. Pero resolvió mi problema.

Maubeh

Se trata de alguna falta de importación

famas23

13

Para aquellos que usan marcos que comprimen, agrupan y minimizan archivos, asegúrese de definir cada dependencia explícitamente ya que estos marcos tienden a cambiar el nombre de sus variables. Eso me sucedió mientras usaba ASP.NET BundleConfig.cspara agrupar los scripts de mi aplicación.

antes de

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

Después

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

Lea más aquí sobre Anotación de dependencia angular.

Moisés Machua
fuente

12

Si tiene este error en la consola ([$injector:nomod], MINERR_ASSET:22), asegúrese de no incluir el código de su aplicación antes de cargarAngularJS

Estaba haciendo eso y una vez que arreglé el pedido, el error desapareció.

Jasdeep Singh
fuente

9

Acabo de experimentar el mismo error, en mi caso fue causado por el segundo parámetro angular.moduleque falta, con suerte esto puede ayudar a alguien con el mismo problema.

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

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

Anth12
fuente

1

Este fue mi problema; Me faltaba una declaración de angular.module ('my.Namespace', []); antes de usar 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
fuente

¡Olvidé que debe incluir src cuando use dependencias específicas!

K - La toxicidad en SO está creciendo.

6

Tuve el mismo problema y probé todas las soluciones posibles. Pero finalmente llegué a saber por la documentación que el ngRoutemódulo ahora está separado. Echa un vistazo a este enlace

Solución: agregue el cdn angular-route.js después del 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
fuente

5

Otro desencadenante de este error es dejar el "." antes de su "de lo contrario" o cualquier otra ruta en su definición de ruta:

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

Mortificado por una parada completa, una vez más. Tengo que amar a JS!

Hilario
fuente

4

Además de la respuesta a continuación, si tiene este error en la consola ( [$injector:nomod], MINERR_ASSET:22), pero todo parece funcionar bien, asegúrese de que no tenga duplicados incluidos en su index.html.

Debido a que este error también se puede generar si tiene inclusiones duplicadas de los archivos que usan este módulo y se incluyen antes del archivo con la declaración real del módulo.

pleerock
fuente

3

Si sigue el tutorial oficial de angularjs https://docs.angularjs.org/tutorial/step_07

Nota: a partir de AngularJS versión 1.2, ngRoute está en su propio módulo y debe cargarse cargando el archivo angular-route.js adicional, que descargamos a través de Bower arriba.

También tenga en cuenta de ngRoute api https://docs.angularjs.org/api/ngRoute

La instalación primero incluye angular-route.js en su HTML:

Puede descargar este archivo desde los siguientes lugares:

Google CDN, p. Ej. //Ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower p. Ej. Bower install angular-route @ XYZ code.angularjs.org p. Ej. "//Code.angularjs.org/XYZ/ angular-route.js "donde XYZ es la versión de AngularJS que está ejecutando.

Luego cargue el módulo en su aplicación agregándolo como un módulo dependiente:

angular.module ('aplicación', ['ngRoute']); ¡Con eso estás listo para comenzar!

zahid9i
fuente

2

John Papa proporcionó mi problema con este comentario bastante oscuro: a veces, cuando recibe ese error, significa que le falta un archivo. Otras veces significa que el módulo se definió después de su uso. Una forma de resolver esto fácilmente es nombrar los archivos del módulo * .module.js y cargarlos primero.

Josh
fuente

0

Mi problema estaba en el config.xml. Cambiando:

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

a

<access origin="*"/>

arreglado.

Frank Conry
fuente

0

Es un error de inyector. Es posible que haya utilizado muchos archivos JavaScript, por lo que puede faltar el inyector.

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

Compruebe el inyector que necesita insertar en su app.js

Bipin Shilpakar
fuente

0

En algún momento he visto este error cuando cambias entre los proyectos y ejecutas los proyectos en el mismo puerto uno tras otro. En ese caso Goto Chrome Developer Tools> Red y tratar de comprobar el archivo escrito js real para: if the file match with the workspce. Para resolver esto, seleccione Disable Cacheen red.

Shashi Ranjan
fuente

0

Después de muchos meses, volví a desarrollar una aplicación AngularJS ( 1.6.4 ), para la cual elegí Chrome (PC) y Safari (MAC) para probar durante el desarrollo. Este código presentó este error: $ inyector: error del módulo modulador en IE 11.0.9600 (Windows 7, 32 bits).

Tras la investigación, quedó claro que el error se debía a uso forEach loop, simplemente reemplazó todos los bucles forEach por bucles normales para que las cosas funcionen como están ...

Básicamente fue un problema de IE11 (respondido aquí ) en lugar de un problema de AngularJS, pero quiero poner esta respuesta aquí porque la excepción planteada fue una excepción de AngularJS. Espero que nos ayude a algunos de nosotros.

similar. no use funciones lambda ... simplemente reemplace () => {...} con una buena función ol '() {...}

Akber Iqbal
fuente

0

Tuve este problema y después de verificar mi código línea por línea vi esto

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

acabo de cambiarlo a

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

y ha funcionado así que revisa tus etiquetas.

Aref Bozorgmehr
fuente

Inyector AngularJS 1.2 $: modulador

Respuestas: