I encountered the following error with a root cause of Module 'ngRoute' is not available
Uncaught Error: [$injector:modulerr] Failed to instantiate module
Amail due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due
to:
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."
Javascript code :
var amailServices = angular.module('Amail',['ngRoute']);
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl : 'list.html'}).
when('/view/:id',{
controller : DetailsController,
templateUrl:'detail.html'}).
otherwise({
redirectTo:'/'
});
}
amailServices.config(emailRouteConfig);
How to fix this
You need to include angular-route.js in your HTML:
<script src="angular-route.js">
http://docs.angularjs.org/api/ngRoute
Or the minified version of the file...
<script src="angular-route.min.js"></script>
More information about this here:
"This error occurs when a module fails to load due to some exception. The error message above should provide additional context."
"In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute."
Listed under section Error: $injector:modulerr Module Error in the Angularjs docs.
For me the solution was fixing a syntax error:
removing a unwanted semi colon in the angular.module function
I got this error due to not pointing the script to the correct path. So make absolutely sure that you are pointing to the correct path in you html file.
For me the error occurred due to my browser using a cached version of the js file containing the module. Clearing the cache and reloading the page solved the problem.
Such error happens when,
1. You misspell module name which you injected.
2. If you missed to include js file of that module.
Sometimes people write js file name instead of the module name which we are injecting.
In these cases what happens is angular tries to look for the module provided in the square bracket []. If it doesn't find the module, it throws error.
Related
I am enough familiar with Javascript as I use it in ajax for PHP but new to AngularJS.
During my first angularJs assignment from "tutorialspoint" I got following error in console:
Error: [$injector:modulerr]
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmainApp%0AM%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0AOd%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53%0AOd%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A1%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0As%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A300%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399%0Aab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135%0Atc%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381%0Atc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A18%3A179%0AJd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A1%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A249%3A428%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A163%3A399%0Alf%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A32%3A384%0A
Which is not readable at all.
I tried try{} catch(){} but, didn't work.
I couldn't use alert() as angularJS doesn't execute in line.
So I checked line by line and I found out that I had written:
var firstApp = angular.module("mainAp", []);
where I had misspelled data-ng-app which should have been mainApp.
But I couldn't have figured it out if there was 300 lines of code.
so, I wanted to know if there is any simple way to show error very specifically like in php.
"[...] which is not readable at all."
You are using the minified angular.min.js version of Angular. That is a good thing for production (as the file is really smaller), but you can use angular.js during development if you want more readable errors.
To illustrate, this is what you get with the minified version:
Error: $injector:modulerr Module Error Failed to instantiate module
mainApp due to: Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=e...)
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:38:184
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:444
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
...
And with the unminified version:
Error: $injector:nomod
Module Unavailable
Module 'ui.bootstrap' 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.
Examples source
I had an Angular module named "sample" and angular debugging console was asking me to rename it to "appname.sample", I did that and I also changed the calling of the module.
But angular seems to be still looking for module sample. and I am getting the error:
$injector:modulerr] Failed to instantiate module decisionone due to: Error: [$injector:nomod] Module is not available! You either misspelled the module name or forgot to load it
Where else am I supposed to change it?
Here is the code:
angular.module('appname.sample', ['ngRoute', 'common', 'ngSanitize'])
and when I am including it:
angular.module('appname.sample')
If you have your config file/route file for that module some where else. Make sure you are also changing that module name.
For example in ngRoute if config and rout specification are defined separately I also need to make module name to be same.
angular.module('appname.sample', []);
angular.module('appname.sample').config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/urlPath", {
controller: 'controllerName',
templateUrl: 'modules/pathToViewPage/view.html',
});
}
]);
In your index.html file page you should have ng-app="your module name" on a tag somewhere, probably the body tag. Change this to match your new module name.
Could it be maybe that you made already a different module dependent on your sample module something like this:
angular.module('someDifferentModule', ['sample'])
If so you have to rename it here as well:
angular.module('someDifferentModule', ['appname.sample'])
Also, based on the Angular error, it seems that the problem is not with your app.sample but rather with a module named decisionone
$injector:modulerr] Failed to instantiate module decisionone due to:
Error: [$injector:nomod] Module is not available! You either
misspelled the module name or forgot to load it
Are you injecting this some where like this:
angular.module('someModule', ['decisionone'])
and desicionone was never instantiated as a module?
I want to use materialize for my angular project from https://github.com/krescruz/angular-materialize but I get the error
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module F1FeederApp due to: Error: [$injector:modulerr]
Failed to instantiate module ui.materialize due to: Error:
[$injector:nomod] Module 'ui.materialize' 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.
In my app.js:
angular.module('F1FeederApp', [
'ui.materialize',
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
What am I doing wrong? According to the link above these declarations should have been enough..
Try running this in root of your project if you are using bower.
bower install angular-materialize --save
and add the source file angular-materialize/src/angular-materialize.js into your index.html
OR
If you are not using bower or node download this file in your project and add it in your index.html
Hope this helps
I am using below piece of code in my JS file:
var mainAngular = angular.module('baniyaApp', ['ngRoute','ui.bootstrap']);
////======================== CONFIG =================================
mainAngular.config(function($routeProvider, $locationProvider) {
alert('ng route');
$routeProvider
.when('/', {
templateUrl: "HomeLandPage.html"
});
});
////=================================================================
"HomeLandPage.html" exists at the same location, so no issue with the path. The main page that contains ng-view in it.I have taken care of using angular.js file from http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js link.
I am getting the below error on the console. Please confirm that the JavaScript file is correct.
Uncaught Error: [$injector:modulerr] Failed to instantiate module baniyaApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
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.
You need to include angular-routes.js after including angular.js in your app directory and html
I'm attempting to pre-render my AngularJS site using PhantomJS. (With phantomjs-runner.js from http://www.yearofmoo.com/2012/11/angularjs-and-seo.html) I'm unable to load the page through PhantomJS as the error below occurs. This error does not occur in IE/Chrome/Firefox.
How do I go about fixing this error?
Error:
Error: [$injector:modulerr] Failed to instantiate module SpaceForAfrica due to:
Error: [$injector:modulerr] Failed to instantiate module dialogs due to:
Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to:
Error: [$injector:nomod] Module 'ngSanitize' 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.
http://errors.angularjs.org/1.2.1/$injector/nomod?p0=ngSanitize
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1507
at ensure (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1435)
at module (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1717)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:3527
Module config
var SpaceForAfrica = angular.module('SpaceForAfrica', ['ngRoute', 'HashBangURLs', 'ui.bootstrap', 'ui.bootstrap.tpls', 'google-maps', 'ui.growl', 'dialogs', 'ngSanitize', 'angularSpinner','angulartics', 'angulartics.google.analytics']).config(spaceForAfricaConfig);
It looks like you might be missing a reference to the ngSanitize code. ngSanitize is part of the AngularJS framework (https://docs.angularjs.org/api/ngSanitize), however, you have to include a separate reference before your PhantomJS reference in order to utilize it.
It appears you are using version 1.2.1 of AngularJS, so you could easily just add one of these tags (or grab the code to include in your own app.)
Non-minified:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
Minified:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>