When I try to run angular code , it always gives this generic error message though it is nor problem with module api or name. For example, in this case, I put name value pairs separated in object with semi colon in config method. After changing to comma, it is fine now. But it does not tell exact cause is in config not in module name. How do I find exact cause?
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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.
It's a common error. It occurs when the ng-app name declared in your template differs from the one used in your script, for example :
index.html
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
angular.module('app', []);
angular.module('myApp') // <-- ERROR OCCURS HERE, it should be 'app'
.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
// controller code here
}]);
Related
Controller is not recognizing - AngularJS error
I've a controller defined in controllerPloyee.js called controllerPloyee which was working before i added the ngRoute and made to route. The error that shows is
angular.min.js:127 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=controllerPloyee
I've checked the documentation and another questions with the same error, but doesn't help.
Index.html
<html ng-app="ployee">
<head>
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
<script src="services/routeConfig.js"></script>
</head>
<body>
<div ng-view></div>
<div ng-include="'view/footer.html'"></div>
</body>
</html>
routeConfig.js
angular.module('ployee', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/login', {
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).when('/',{
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).otherwise({redirectTo: "/login"})
})
controllerPloyee.js
angular.module('ployee').controller('controllerPloyee', function($scope){
});
The script that creates the module needs to be placed before the others:
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!-- IMPORTANT needs to be place here -->
<script src="services/routeConfig.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
̶<̶s̶c̶r̶i̶p̶t̶ ̶s̶r̶c̶=̶"̶s̶e̶r̶v̶i̶c̶e̶s̶/̶r̶o̶u̶t̶e̶C̶o̶n̶f̶i̶g̶.̶j̶s̶"̶>̶<̶/̶s̶c̶r̶i̶p̶t̶>̶
The statement angular.module('ployee', ['ngRoute']) creates a new module. The statement angular.module('ployee') retrieves the module for further configuration.
When the module is created after the controller script, the controller is lost. This is why the script that creates the module needs to be placed before other scripts which add controllers, services, filters, directives, constants, etc.
A module is a container for your app.
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module.
From the Docs:1
Creation versus Retrieval
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
For more information, see
AngularJS angular.module Function API Reference
AngularJS angular.Module Type API Reference
AngularJS Developer Guide - modules
I am trying to inject a dependency in a very basic AngularJs web app,
var app = angular.module('app', ['ui-router']);
app.config(['$stateProvider','$controllerProvider', ($stateProvider, $controllerProvider) => {
$controllerProvider.allowGlobals();
$stateProvider.state('firstMessage', {
url: '/first-msg',
template: '<strong>hi this is irst msg</strong>'
});
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grid-Pract</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="./app.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21/angular-ui-router.min.js"></script>
</head>
<body ng-app="app">
first
<div ui-view></div>
</body>
</html>
but I'm getting an this error - any help is appreciated.
enter image description here
The module name for ui router is 'ui.router', not 'ui-router'.
Try changing your code to:
var app = angular.module('app', ['ui.router']);
You will get much better error messages if you use the unminified versions of the libraries.
Use:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21 /angular-ui-router.js
Then your error message will be:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui-router due to:
Error: [$injector:nomod] Module 'ui-router' 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.
https://errors.angularjs.org/1.7.5/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ui-router%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ui-router'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.5%2F%24injector%2Fmodulerr%3Fp0%3Dui-router%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ui-router'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.5%252F%2524injector%252Fnomod%253Fp0%253Dui-router%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A138%253A12%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2290%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2211%253A38)%250A%2520%2520%2520%2520at%2520module%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2288%253A14)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5017%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5019%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5041%3A15%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5019%3A40%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A4918%3A19)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1942%3A20)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1963%3A12)
at angular.js:138
at angular.js:5041
at forEach (angular.js:387)
at loadModules (angular.js:5001)
at createInjector (angular.js:4918)
at doBootstrap (angular.js:1942)
at bootstrap (angular.js:1963)
at angularInit (angular.js:1848)
at angular.js:36216
at HTMLDocument.trigger (angular.js:3501)
The error becomes obvious, use ui.router instead of ui-router.
̶v̶a̶r̶ ̶a̶p̶p̶ ̶=̶ ̶a̶n̶g̶u̶l̶a̶r̶.̶m̶o̶d̶u̶l̶e̶(̶'̶a̶p̶p̶'̶,̶ ̶[̶'̶u̶i̶-̶r̶o̶u̶t̶e̶r̶'̶]̶)̶;̶
var app = angular.module('app', ['ui.router']);
See AngularJS Error Reference - $injector modulerr
We're trying to get Angular set up for a fairly simple project using Gulp, but we're somehow failing at the first hurdle. Here's what we have set up, more or less:
index.html:
<!doctype html>
<html ng-app="testModule">
<head>
<meta charset="utf-8">
<title>Test Module</title>
<meta name="description" content="">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div ng-view></div>
<!-- inject:js -->
<script src="/angular-route.js"></script>
<script src="/angular.js"></script>
<!-- endinject -->
<!-- inject:bundle:js -->
<script src="/bundle.js"></script>
<!-- endinject -->
</body>
</html>
bundle.js:
// A bunch of stuff inserted by Gulp.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var angular;
(function () {
angular.module('testModule', ['ngRoute']);
angular.module('testModule').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
})();
},{}]},{},[1])
//# sourceMappingURL=bundle.js.map
This seems simple enough to be foolproof, yet here are the errors we're getting:
angular-route.js:24: Uncaught TypeError: Cannot read property 'module' of undefined
bundle.js:8: Uncaught TypeError: Cannot read property 'module' of undefined
angular.js:4458: Uncaught Error: [$injector:modulerr] Failed to instantiate module testModule due to:
Error: [$injector:nomod] Module 'testModule' 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.
It almost seems like the browser doesn't know angular exists when processing angular-route and bundle, and only figures it out later. How can we get the browser to detect the presence of angular earlier so everything works?
You don't need to initialize the variable angular manually.
Here's a plunker, and you'll note we're brought right to the view for /foo: http://plnkr.co/edit/dxo3ZUJIWLeFw9HXF80w?p=info
angular.module('testModule', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
I've read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!
The full error reads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
{{ test }}
</div>
<script src="static/bower_components/angular/angular.js"></script>
<script src="static/bower_components/angular-route/angular-route.min.js"></script>
<script src="static/components/app.js"></script>
</body>
</html>
app.js:
'use strict';
function() {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.
'use strict';
(function () {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.
Check out this answer.
What is the difference between angular-route and angular-ui-router?
If this is the case.
Solution 1. change the script from angular-route.js to angular-ui-router.js
Solution 2. change the provider to $routeProvider
Hope it helps
If all the above answers fail, Just try this one.
I think the problem is with the included script...
Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as
<script src="angular.min.js"></script>
If it doesn't work,
Solution 2:
Try adding the above script, on your head tag just after the end of the title tag.
I have the following HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Title</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
Hello World
</body>
</html>
and is giving me the following exception:
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.2.26/$injector/nomod?p0=ngLocale
If I switch to the non-minified angular.js, the error goes away
It is hard to say without looking at your javascript file.
Usually the problem is that angular's dependency system uses function arguments with the default syntax.
for example:
app.controller('mainController', function($scope) {
$scope.data= 'data';
});
becomes:
app.controller("mainController",function(e){e.data="data"});
In order to avoid this situations you have to use the following syntax
app.controller('mainController', ['$scope', function($scope) {
$scope.data= 'data!';
}]);
So the minification script will not change the dependencies name.
You can read more at https://docs.angularjs.org/tutorial/step_05 scroll down to A note on minification