CODEWITHSUNDEEP
javascriptangularjs
shoen
shoen

Reputation: 11865

AngularJS 1.2 $injector:modulerr

When using angular 1.2 instead of 1.07 the following piece of code is not valid anymore, why?

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

the issue is in the injector configuration part (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)

If I remember correctly this issue started with angular 1.1.6.

Upvotes: 450

Views: 465869

Answers (18)

Aref Bozorgmehr
Aref Bozorgmehr

Reputation: 538

I had this problem and after check my code line by line i saw this

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

i just changed it to 

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

and it's worked. so check your tags.

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15041

After many months, I returned to develop an AngularJS (1.6.4) app, for which I chose Chrome (PC) and Safari (MAC) for testing during development. This code presented this Error: $injector:modulerr Module Error on IE 11.0.9600 (Windows 7, 32-bit).

Upon investigation, it became clear that error was due to forEach loop being used, just replaced all the forEach loops with normal for loops for things to work as-is...

It was basically an IE11 issue (answered here) rather than an AngularJS issue, but I want to put this reply here because the exception raised was an AngularJS exception. Hope it would help some of us out there.

similarly. don't use lambda functions... just replace ()=>{...} with good ol' function(){...}

Upvotes: 0

Shashi Ranjan
Shashi Ranjan

Reputation: 1561

Sometime I have seen this error when you are switching between the projects and running the projects on the same port one after the other. In that case goto chrome Developer Tools > Network and try to check the actual written js file for: if the file match with the workspce. To resolve this select Disable Cache under network.

Upvotes: 0

Bipin Shilpakar
Bipin Shilpakar

Reputation: 188

Its an injector error. You may have use lots of JavaScript files so the injector may be missing.

Some are here: 

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

Please check the injector you need to insert in your app.js

Upvotes: 1

otherDewi
otherDewi

Reputation: 1098

A noob error can be forgetting to include the module js 

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

files in the index.html at all

Upvotes: 26

Josh
Josh

Reputation: 2006

John Papa provided my issue on this rather obscure comment: Sometimes when you get that error, it means you are missing a file. Other times it means the module was defined after it was used. One way to solve this easily is to name the module files *.module.js and load those first.

Upvotes: 2

Bastin Robin
Bastin Robin

Reputation: 938

I had the same problem and tried all possible solution. But finally I came to know from the documentation that ngRoute module is now separated. Have a look to this link

Solution: Add the cdn angular-route.js after angular.min.js script

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

Upvotes: 6

Anth12
Anth12

Reputation: 1897

I have just experienced the same error, in my case it was caused by the second parameter in angular.module being missing- hopefully this may help someone with the same issue.

angular.module('MyApp');

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

Upvotes: 9

Moses Machua
Moses Machua

Reputation: 11542

For those using frameworks that compress, bundle, and minify files, make sure you define each dependency explicitly as these frameworks tend to rename your variables. That happened to me while using ASP.NET BundleConfig.cs to bundle my app scripts together.

Before

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

After

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

Read more here about Angular Dependency Annotation.

Upvotes: 13

Mick
Mick

Reputation: 25491

One more thing to add to the list as this is the first result that comes up with a google search of 'Error: [$injector:modulerr] angular':

If you have a mismatch between your app name in your 'index'html' and in your main javascript app definition this can also generate this error.

For example if your HTML looks like this:

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

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

        etc ...

And your JavaScript looks like this (i.e has a typo on app name - myWebCite instead of myWebSite):

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

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

then the 'Error:[$injector:modulerr] angular' error will be generated also.

Upvotes: 40

Hilary
Hilary

Reputation: 330

Another trigger for this error is leaving the "." out before your "otherwise" or any other route in your route definition:

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

Mortified by a full-stop, yet again. Gotta love JS!

Upvotes: 5

SirajuddinLuck
SirajuddinLuck

Reputation: 141

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

Upvotes: 7

Frank Conry
Frank Conry

Reputation: 2716

My problem was in the config.xml. Changing:

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

to

<access origin="*"/>

fixed it.

Upvotes: 0

zahid9i
zahid9i

Reputation: 596

If you go through the official tutorial of angularjs https://docs.angularjs.org/tutorial/step_07

Note: Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file, which we download via Bower above.

Also please note from ngRoute api https://docs.angularjs.org/api/ngRoute

Installation First include angular-route.js in your HTML:

You can download this file from the following places:

Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js Bower e.g. bower install [email protected] code.angularjs.org e.g. "//code.angularjs.org/X.Y.Z/angular-route.js" where X.Y.Z is the AngularJS version you are running.

Then load the module in your application by adding it as a dependent module:

angular.module('app', ['ngRoute']); With that you're ready to get started!

Upvotes: 3

arp
arp

Reputation: 1368

my error disappeared by adding this '()' at the end

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

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

Upvotes: 42

Jasdeep Singh
Jasdeep Singh

Reputation: 3326

If you have this error in console ([$injector:nomod], MINERR_ASSET:22), make sure you are not including your application code before loading AngularJS

I was doing that and once I fixed the order, the error went away.

Upvotes: 13

pleerock
pleerock

Reputation: 18856

Besides below answer, if you have this error in console ([$injector:nomod], MINERR_ASSET:22), but everything seems to work fine, make sure that you don't have duplicate includes in your index.html.

Because this error can also be raised if you have duplicate includes of the files, that use this module, and are included before the file with actual module declaration.

Upvotes: 4

shoen
shoen

Reputation: 11865

The problem was caused by missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part:

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

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

Upvotes: 636

Related Questions