I'm having an issue creating an AngularJS module inside a RequireJS define method.
When I make reference to the ui-router module that I need, Angular tells me:
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.
This only happens if I define uiRouter in the requireJS dependency list.
Here's my code:
require.config({
paths : {
'angular' : "/script/lib/angular",
'uiRouter' :"/script/lib/angular-ui-router",
},
shim : {
'angular': {
exports : 'angular'
},
'uiRouter' : {
deps : ['angular']
}
}
});
define(['angular', 'uiRouter'], function (angular) {
var module = angular.module('myApp', []);
});
If I take uiRouter out of the define dependency array, everything works as expected. What am I doing wrong?
You need to add the ui.router to your module.
define(['angular', 'uiRouter'], function (angular) {
var module = angular.module('myApp', ['ui.router']);
});
EDIT: I added the following:
define('myApp', ['angular', 'uiRouter'], function (angular) {
var module = angular.module('myApp', ['ui.router']);
});
Related
I'm trying to start a new Angular 1 Application based on ES6. I use webpack and the babel-loader to convert the JS.
My problem now is to load an own config module. Please have a look at this:
// config/config.js
import angular from 'angular';
export default angular.module('config')
.factory('config', () => {
return {
url: {
products: 'https://....'
},
products: []
}
})
The corresponding app.js reads (I stripped some imports):
import angular from 'angular';
import config from './config/config';
import HomeCtrl from './controller/HomeController';
let app = () => {
return {
template: require('./app.html')
}
};
const MODULE_NAME = 'app';
angular.module(MODULE_NAME, [uiRouter, config])
.directive('myapp', app)
.config(['$stateProvider', '$urlRouterProvider', 'config', function ($stateProvider, $urlRouterProvider, config) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home", {
"url": "/",
"template": require('./views/home.html'),
"controller": HomeCtrl,
'controllerAs': 'app'
})
}]);
export default MODULE_NAME;
The error message says:
Uncaught Error: [$injector:nomod] Module 'config' 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.
What did I missed here? Is there a better way to load an application wide config object to use in certain services?
Thanks for help!
When you create a module, you have to call module() with two args: the name and the dependencies. If you call it with only one parameter, you get the existing module with that name.
Change your module config declaration to:
export default angular.module('config', [])
.factory('config', () => {
return {
url: {
products: 'https://....'
},
products: []
}
}).name
In addition, I always export only the .name of a new module. When you import the module, you just need its name.
Hope it helps.
When you declare your dependent modules in your main module definition you need to use the string identifier, not the actual angular.module (at least here it's specified as Array[String]: https://docs.angularjs.org/api/ng/function/angular.module
So, you should change to this:
angular.module(MODULE_NAME, ['config'])
Please check Angular documentation - module dependencies it's array of strings, but not dependent modules types or instances
angular.module(name, [requires], [configFn]);
when
requires (optional) Array<string>
So your solution to use next declaration
angular.module(MODULE_NAME, ['config'])
https://docs.angularjs.org/api/ng/function/angular.module
Hello i am trying to develop a web app with angular. I have added the ng-app="appApp" to the html file and also the .js files.
main.controller.js
(function () {
'use strict';
// register the controller as MainController
angular
.module('appApp.main')
.controller('MainController', MainController);
/**
* #ngdoc function
* #name appApp.main.provider:MainController
* #description
* Provider of the {#link appApp.main.controller:MainController MainController}
*
* #param {Service} $scope The scope service to use
* #param {Service} $http The http service to use
*/
// MainController.$inject = [];
function MainController() {
var vm = this;
}
})();
main.js
(function () {
'use strict';
// register the route config on the application
angular
.module('appApp.main', ['ui.router'])
.config(configMainRoute)
// inject configMainRoute dependencies
configMainRoute.$inject = ['$stateProvider', 'mainMenuProvider'];
// route config function configuring the passed $stateProvider
function configMainRoute($stateProvider, mainMenuProvider) {
var mainState = {
name: 'main',
url: '/',
authenticate: true,
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'vm'
};
$stateProvider.state(mainState);
mainMenuProvider.addMenuItem({
name: 'Home',
state: mainState.name,
order: 1
});
}
})();
app.js
(function () {
'use strict';
angular
.module('appApp', [
// Add modules below
'ngCookies',
'ngResource',
'ngSanitize',
'ngMessages',
'ngMaterial',
'ui.router',
'btford.socket-io',
'appApp.main'
])
.config(appConfig)
.run(appRun);
...........
When i run the app i get this errors:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
Uncaught Error: [$injector:nomod] Module 'appApp.main' 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 can i fix that errors? Thank you
The first thing is :
In the html you've written
ng-app="appApp"
But in the module definition you've written
angular
.module('appApp.main', ['ui.router'])
The module names should be same unless you've another appApp module and you add the "appApp.main" module as dependency.
Another thing is as you've using "ui-router" you need to link the js library file of ui-router in the html along with angular library file.
Just check the sequence of js files. At first angular, then all library js, then app, main, main controller
I think,
1.You should call ng-app="appApp.main" or
2.You should initially declare appApp module. You should replace some code in main.js
angular.module('appApp.main', []);
angular.module('appApp', [
'ui.router',
'appApp.main'
])...
Also, remove [ui.router] in main.js. It has declared in app.js
To whom it may concern,
In effort to bind some html, which, to note, will include angular directives, upon injecting an ngSanitize dependency, my app ceases to render. Any thoughts as to why this happens, and whether my code has any blatant issues?
TLDR: everything works fine until bring ngSanitize into the picture!
Working Controller:
angular.module('appName')
.controller('DecksCtrl', function ($scope, Auth, $http) {. . .
Broken Controller:
angular.module('appName', ['ngSanitize'])
.controller('DecksCtrl', function ($scope, Auth, $http) {. . .
Console Errors:
Uncaught Error: [$injector:modulerr] Failed to instantiate module appName due to: Error: [$injector:unpr] Unknown provider: $stateProvider
Thank you
Peter Ward
Your problem is misunderstanding the difference between a module declaration and a reference to an existing module.
To declare a module there are 2 arguments, the name and the dependency array
angular.module('appName', [/* all the dependencies for this module*/]);
Then when you add components you use the module reference getter that does not have second dependency argument. This getter returns the module object for chaining the component(s) to
angular.module('appName')
.controller('DecksCtrl', function ($scope, Auth, $http) {. . .
What you have done is try to inject a dependency into a module reference getter. this in turn over wrote the original declaration for that module
You want to inject it in your app.js . In that yeoman generator its - appName / client / app / app.js
angular.module('yourapp', [
//your injections here
'ngSanitize',
'other injection',
'another injection'
]).config(function ($routeProvider, $locationProvider, $httpProvider) {
You declare all of your apps dependancies here.
Just getting started with angularJS and I'm unsure as to why I'm getting module unavailable.
The first code snippet is the one referenced in the HTML (main.js).
'use strict';
angular.module('userApp')
.controller('MainCtrl', function($scope, $http) {
$scope.user = [];
$http.get('http://127.0.0.1:8080/collector/50001366562').success(function(data) {
$scope.user = data;
})
})
<html ng-app="userApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="js/controllers/main.js"></script>
</head>
<body ng-controller="MainCtrl">
{{user}}
</body>
</html>
Can someone please explain why this doesn't work?
In the chrome JS console I get the following errors:
Uncaught Error: [$injector:nomod] Module 'userApp' 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.
Uncaught Error: [$injector:modulerr] Failed to instantiate module userApp due to:
Error: [$injector:nomod] Module 'userApp' 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.
The function angular.module can be used both as getter and setter:
You have to use setter when creating new module
angular.module('userApp', []);
The second param here is dependencies array
When you wanna access your existing module, e. g. to add services, controllers etc you can use getter (w/o second param)
angular.module('userApp')
Getter will return you the module, it can be called many times during app lifecycle.
I'm also pretty new to Angular but when you declare a module don't you need that second parameter?
angular.module('userApp', []);
This solution is what the error message is communicating:
If registering a module ensure that you specify the dependencies as the second argument.
If the app.userModule.services module is created first (index.js) and then is instanced to create the factory (UserService.js), why do I get the following error?
Uncaught Error: [$injector:unpr] Unknown provider: $resourceProvider
<- $resource <- UserService
Only if I create the module in UserService (added [ 'ngResource' ]) the application works right.
angular.module('guotay.userModule.services', [ 'ngResource' ]).factory(...
The question: Why the content of user/services/index.js is ignored??
The project structure and some parts of the code:
index.html:
<script src="app/app.js"></script>
<script src="app/components/user/index.js"></script>
<script src="app/components/user/controllers/index.js"></script>
<script src="app/components/user/controllers/LoginCtrl.js"></script>
<script src="app/components/user/services/index.js"></script>
<script src="app/components/user/services/UserService.js"></script>
And the same with other modules
user/index.js
angular.module('app.userModule', [ 'app.userModule.controllers',
'app.userModule.services' ]).config(function config($routeProvider) {...});
user/services/index.js
angular.module('app.userModule.services', []);
user/services/UserService.js
var serviceId = 'UserService';
angular.module('app.userModule.services').factory(serviceId, [ '$resource',
serviceFunc ]);
function serviceFunc($resource) {...}
app.js
angular.module('app', ['ngRoute', 'ngCookies', 'app.userModule', 'app.newsEntryModule'])
.config(...)
.run(function($rootScope, $location, $cookieStore, UserService) {
UserService.get(function(user) {
$rootScope.user = user;
$location.path(originalPath);
});});
I have other services with the same implementation, and they work right with the creation of the module in the index.js, but they not appear in app.js.
Because angular.module('someName', ['list', 'of', 'dependencies']);
is the way you define a module and angular.module('someName') is the way you obtain an instance (retrieve) of an already defined module.
If you define the same module twice the second definition will overwrite the first one - you will loose everything you defined in the first one.
It's all in the docs.
Update:
The browser first loads app.js and only after it loads app/components/user/services/index.js
So any code in app.js depending on stuff from index.js will break.
This is the reason you cannot reference UserService in app.js. It's not yet declared.