This question already has answers here:
Angular JS, 'nomod',Module '{0}' is not available! You either misspelled
(3 answers)
Closed 7 years ago.
Uncaught 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.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=myApp
Following is my code snippet
Uncaught 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.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=myApp
Following is my code snippet
(function() {
angular.module('myApp').controller('MainCtrl', function($scope) {
$scope.data = {
Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}
});
angular.module('myApp').controller('OverviewCtrl', function($scope) {
$scope.list1 = {
title: 'AngularJS - Drag Me'
};
$scope.list2 = {};
});
}());
You are using the getter syntax, not the setter syntax when attempting to first define myApp.
You need to create the myApp module before trying to attach a controller to it. Note that it takes two parameters, a string name and an array of dependencies.
angular.module('myApp', []).controller('MainCtrl', function($scope) {
Once your module is created, you can reference it via the getter syntax:
angular.module('myApp').controller('OverviewCtrl', function($scope) {
Related
Trying to test angular services with Jest and got this error:
[$injector:nomod] Module 'superag' 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.
How do I mock my module 'superag' and make available to mathService?
Do I have to import the app.js file with the module declaration every test I make?
Ps.: I've tried with beforeEach(module('superag')) too without success
package.json
"jest": {
"collectCoverageFrom": [
"**/*.{js}",
"!**/node_modules/**"
]
},
"devDependencies": {
"angular-mocks": "^1.6.9",
"jest-cli": "^23.0.0-alpha.0"
},
"dependencies": {
"angular": "^1.6.9"
}
}
math.service.js
function MathService(){
var addTwoNumbers = function(x, y){
return x + y;
};
return {
addTwoNumbers
};
}
angular.module('superag').factory('mathservice', MathService);
math.service.test.js
require('angular');
require('angular-mocks');
require('./math.service.js');
describe('Math service - addTwoNumbers', () => {
beforeEach(
angular.mock.module('superag')
);
var _mathservice;
beforeEach(inject((mathservice) => {
_mathservice = mathservice;
}));
it('1 + 1 should equal 2', () => {
var actual = _mathservice.addTwoNumbers(1,1);
expect(actual).toEqual(2);
});
});
This error occurs when you declare a dependency on a module that isn't defined anywhere or hasn't been loaded in the current browser context.
When you receive this error, check that the name of the module in question is correct and that the file in which this module is defined has been loaded (either via <script> tag, loader like require.js, or testing harness like karma).
A less common reason for this error is trying to "re-open" a module that has not yet been defined.
To define a new module, call angular.module with a name and an array of dependent modules, like so:
// When defining a module with no module dependencies,
// the array of dependencies should be defined and empty.
var myApp = angular.module('myApp', []);
To retrieve a reference to the same module for further configuration, call angular.module without the array argument.
var myApp = angular.module('myApp');
Calling angular.module without the array of dependencies when the module has not yet been defined causes this error to be thrown. To fix it, define your module with a name and an empty array, as in the first example above.
You need to load the module under test using the module function provided in angular-mocks, so it is available in your tests, per docs.
beforeEach(module('superag'))
Then you can inject in your service.
I'm attempting to inject a factory called recipesApp.recipeData into my MainController, as soon as I added it, the app broke and I have been receiving the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to:
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to:
Error: [$injector:nomod] Module 'recipesApp.recipeData' 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.
My main app module is written as follows:
var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);
My controller:
app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData',
function($scope,$http,$location,$rootScope,recipeData) {...}]);
My recipe factory:
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
I have tried changing the file structure, the file naming convention. I have tried simply linking it onto the controller itself in the same file, I've changed the order in which it is being injected, and I've triple checked the spelling. Any suggestions would be very helpful!
You're trying to add $http as a module dependency, $http is a service, not a module. Remove it from your recipesApp.recipeData module dependencies
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
Also make sure all the .js files are present in your index.html
Trying to get up and running with webpack for angularjs. Trying to setup different angular modules for each folder within /webpack & then inject them into my main app module definition. What am I doing wrong?
Running into this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module webpack due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"photocropper"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
entrypoint:
var angular = require('angular');
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')
])
./webpack/photocrop/client/index.js
var angular = require('angular');
module.exports = angular.module('photocropper', [])
Remember that you need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client') //this is an object
])
You can simply require the file and just inject by name like this:
var firstModule = require('./webpack/photocrop/client')
ngModule = angular.module('webpack', [
'firstModule' // this should work
])
firstModule(ngModule)
I had the same problem and in my case it got solved by changing the assigment in:
var angular = require('angular');
To simply:
require('angular');
The reason is that this assigment is creating a new "angular" variable which is different than the one provided by Angular itself, hence, it doesn't have the 'module' property
Module 'ConatactsApp' 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. var ContactsApp= angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello angular";
});
Check whether the html ng-app name is ConatactsApp or something else... if not ... change to ConatactsApp
My code is like this
App.js
angular.module('mailerApp', [
'mailerApp.services',
'mailerApp.controllers',
'ui.bootstrap',
'angular-loading-bar',
'textAngular',
'angularFileUpload'
]);
Cotrollers.js
angular.module('mailerApp.controllers').controller('MailerCntrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
}]);
Services.JS
angular.module('mailerApp.services', []).factory('rateRequestService', ['$http', rateRequestService]);
function rateRequestService($http) {
var service = { getData: getData };
return service;
function getData() {
return $http({
method: 'Get',
url: '../services/RateRequestWS.asmx/GetReadOnlyData?'
});
}
}
HTML
body ng-app="mailerApp" ng-controller="MailerCntrl">
</body>
Everything looks okay to me, But this throws an error
Uncaught Error: [$injector:nomod] Module 'mailerApp.controllers' 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.
Can any one point out What I am doing wrong here?
Instead of
angular.module('mailerApp.controllers').controller...
You need to do
angular.module('mailerApp').controller... // to add the controller to the mailerApp module
angular.module('mailerApp.controllers', []).controller... // to add the controller to a new mailerApp.controllers module
And the same goes with;
angular.module('mailerApp.services').factory...
Instead you need to
angular.module('mailerApp').factory... // add the factory to the mailerApp module
angular.module('mailerApp.services', []).factory... // add the factory to a new mailerApp.services module
When you create and angular module, you give it a name and the list of dependencies in the array;
var module = angular.module('<module_name>', [<dependencies>])
But then when you add a controller/factory to the module, you'll need to either use the module object you created.
when you write angular.module('mailerApp.controllers', [ ]), you create new module as 'mailerApp.controllers' and in second parameter you pass dependencies.
and when you write angular.module('mailerApp.controllers') it references previously created module.
But in your case your directly referencing module without creating it, therefore it gives you error for that. Same goes for other cases