I am trying to use an angular provider so I can dynamically load sub-modules within the $routeProvider of my angular application. However, I am getting one of 2 errors:
Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
[$injector:unpr] Unknown provider: MyRouteProvider
Error: [$injector:nomod] Module 'MainApp' 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.
Here's what I have:
main.js
require.config({
baseUrl : '',
version : '1.0',
});
require([
'app',
'my-route-mod/my-route-mod.module',
'my-route-mod/my-route-mod.provider',
'main-app/main-app.config',
'main-app/main-app.run',
/* other initial modules */
],function(){
angular.bootstrap(document,['MainApp']);
});
app.js
(function(){
'use strict';
/* global angular, $ */
angular.module('MainApp',[
'MyRouteMod', /* This module does not want to load */
'ngRoute',
'ngCookies'
]);
})();
my-route-mod/my-route-mod.module.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod',[]);
})();
my-route-mod/my-route-mod.provider.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod')
.provider('MyRouteModProvider',Provider);
Provider.$inject = [];
function Provider() {
var provider = this;
provider.$get = function () {
return { route : someFunction };
}
function someFunction(){...}
}
})();
main-app/main-app.config.js
(function(){
/* global angular */
'use strict';
angular.module('MainApp').config(Config);
Config.$inject = [
'MyRouteModProvider',
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide'
];
function Config(
MyRouteModProvider,
$routeProvider,
$locationProvider,
$controllerProvider,
$compileProvider,
$filterProvider,
$provide
) {
/* ... do some config stuff ... */
}
})();
index.html
<!DOCTYPE>
<html>
<head><title>My App</title></head>
<body>
<!-- Some other stuff -->
<div ng-view></div>
<!-- Some other stuff -->
<script src="vendor-stuff"></script>
<script src="vendor/require.js" data-main="main">/script>
</body>
</html>
I took requirejs out of the equation and was getting the same issue with the provider not loading.
I either get that MainApp is not available, or that MyRouteMod is not available, or that MyRouteModProvider is not available.
Suggestions please.
Angular naming conventions. For providers, the string 'Provider' gets added to your constructor name. So, if you have:
angular.module('MyMod').provider('MickeyMouse',Provider);
Then angular will look for 'MickeyMouseProvider'. So, if you do
angular.module('MyMod').provider('MickeyMouseProvider',Provider);
then angular will look for 'MickeyMouseProviderProvider'
Hope this saves you a bit of time.
Related
I am new to Angular World and very beginner at Karma.
I am receiving the following error when I am trying to run the Karma-Jasmine Unit test.
{
"message": "An error was thrown in afterAll\nUncaught Error: [$injector:nomod] Module 'app' 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.\nhttp://errors.angularjs.org/1.6.9/$injector/nomod?p0=app", "str": "An error was thrown in afterAll\nUncaught Error: [$injector:nomod] Module 'app' 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.\nhttp://errors.angularjs.org/1.6.9/$injector/nomod?p0=app"
}
Going through various posts, I found that this error occurs when:
Misspelled the module name
Forget to register the module
Forget to load dependencies
But it seems that none of the above issue applies to my app. My App is very small as of now. I am posting my almost whole app for reference.
Please find my code below for reference.
app.module.js
(function () {
"use strict";
angular
.module("app", [
"ngRoute",
"ngMessages",
"ngclipboard",
"ui.router"
])
.config(configurations);
function configurations($locationProvider, $routeProvider, $httpProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when("/licensing", {
templateUrl: "app/licensing/licensing.html",
controller: "LicensingController",
controllerAs: "vm"
})
.otherwise({
redirectTo: "/licensing"
});
}
})();
index.html
<!-- Angular Libraries -->
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="./node_modules/angular-messages/angular-messages.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="./scripts/clipboard.js"></script>
<script src="./libs/angular/angular-clipboard.js"></script>
<script src="./app/app.module.js"></script>
<!-- Controllers -->
<script src="./app/authentication/login.controller.js"></script>
<script src="./app/authentication/forgetpassword.controller.js"></script>
<script src="./app/licensing/licensing.controller.js"></script>
karma.conf.js
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// list of files / patterns to load in the browser
files: [
'./node_modules/angular/angular.js', // Angular Framework
'./node_modules/#uirouter/angularjs/release/angular-ui-router.js', // UI-Router
'./node_modules/angular-mocks/angular-mocks.js', // Loads the Module for Tests
'./app/licensing/licensing.controller.js', // Licensing Controller
'./app/app.module.js', // Our Angular App
'./app/licensing/licensing.controller.spec.js' // Licensing Controller Spec File
],
license.controller.js
(function () {
"use strict";
angular
.module("app")
.controller("LicensingController", LicensingController)
function LicensingController() {
// Some code
}
})();
licensing.controller.spec.js
describe("Licensing Form", function () {
var LicensingController;
beforeEach(angular.mock.module("app"));
beforeEach(inject(function (_LicensingController_) {
LicensingController = _LicensingController_;
}));
it("This is a Dummy Test for (2 + 2)", function () {
expect(2 + 2).toEqual(4);
});
});
I am having a hard time generating documentation for my gulp-angular based project: I am using this generator to generate a docs folder inside of my project: generator-ngdoc (dgeni based). Whenever I open the documentation for a component I am getting this error.
angular.js:68 Uncaught Error: [$injector:nomod] Module 'appModule' 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.5.9/$injector/nomod?p0=appModule
at angular.js:68
at angular.js:2127
at ensure (angular.js:2051)
at Object.module (angular.js:2125)
at modules.js:5
at modules.js:20
in modules.js there is the following code:
(function () {
'use strict';
angular
.module('appModule')
.config(config);
config.$inject = ['$logProvider', 'ngToastProvider'];
function config($logProvider, ngToastProvider) {
// Enable log
$logProvider.debugEnabled(true);
ngToastProvider.configure({
animation: 'slide',// or 'fade'
verticalPosition: 'bottom',
horizontalPosition: 'left'
});
}
})();
/* global moment:false */
(function() {
'use strict';
angular
.module('appModule')
.constant('moment', moment);
})();
/**
*
* #ngdoc module
* #name appModule
* #module appModule
* #packageName agirc-arrco
* #description
* This is a sample module.
*
**/
(function () {
'use strict';
angular
.module('appModule', ['ngAnimate', 'ngCookies', 'ngTouch',
'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ui.router',
'ui.bootstrap', 'agr.components.stepper', 'agr.components.toggle',
'agr.components.accordionrow', 'angularMoment',
'agr.components.header', 'agr.filters.period', 'agr.directives.limit-
to', 'env.config']);
})();
I am not sure but is seems that dgeni is including the module config before the module declaration itself. any solution for that ?
I found the solution : The modules files should be added separately to gulp/module.js in the gulp.src task
AngularJS v1.6.0.
How to understand what module fails to load? Why and how to fix it?
I get the following error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.0/$injector/modulerr?p0=fooApp&p1=Error%…c%20(http%3A%2F%2Fviic.com%2Flibs%2Fangular%2Fangular.min.js%3A21%3A332)(…)(anonymous function) # angular.js:38(anonymous function) # angular.js:4756q # angular.js:357g # angular.js:4717eb # angular.js:4639c # angular.js:1838Lc # angular.js:1859oe # angular.js:1744(anonymous function) # angular.js:32890b # angular.js:3314
www-embed-player.js:218 GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENTRd # www-embed-player.js:218Vd # www-embed-player.js:222(anonymous function) # www-embed-player.js:249L # www-embed-player.js:173re # www-embed-player.js:246xk # www-embed-player.js:654(anonymous function) # www-embed-player.js:705(anonymous function) # S0Q4gqBUs7c?controls=0&showinfo=0&enablejsapi=1&showsearch=0&rel=0:10
My app frontend structure:
- public
- js/controllers/VideoChannelCtrl.js
- js/services/CoubService.js
- js/app.js
- js/appRoutes.js
- index.html
- views/player.html
- libs/angular/angular.min.js
- libs/angular-route/angular-route.min.js
...
index.html
...
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/VideoChannelCtrl.js"></script>
<script src="js/services/CoubService.js"></script>
<script src="js/appRoutes.js"></script>
...
js/app.js
var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']);
js/appRoutes.js
angular.module('appRoutes', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/player.html',
controller: 'VideoChannelController'
});
$locationProvider.html5Mode(true);
}]);
js/controllers/VideoChannelCtrl.js
fooApp.controller('VideoChannelController', ['$scope', 'Coub', function($scope, Coub) {
$scope.tagline = 'To the moon and back!';
Coub.get().success(function(data) {
$scope.videolink = data[0].url;
});
}]);
js/services/CoubService.js
angular.module('CoubService', []).factory('Coub', ['$http', function($http) {
return {
get : function() {
return $http.get('/api/videolinks');
},
delete : function(id) {
return $http.delete('/api/videolinks/' + id);
};
}]);
You didn't inject the VideoChannelController controller correctly.
I suggest you to declare your controller like this :
js/controllers/VideoChannelCtrl.js
angular.module('fooApp')
.controller('VideoChannelController', VideoChannelController);
VideoChannelController.$inject = ['$scope', 'Coub'];
function VideoChannelController($scope, Coub) {
$scope.tagline = 'To the moon and back!';
Coub.get().success(function(data) {
$scope.videolink = data[0].url;
});
}
As VideoChannelController controller is declared as controller of fooApp module application, you don't need injection like :
var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']);
You can remove VideoChannelController from this declaration.
Also, you should refer to the following AngularJS development guideline :
Angular Style Guide
Is VideoChannelCtrl a controller or a module? If it's a controller, then you can't inject it as a module dependency. Remove it from module dependencies - angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);
Or create separate module and have this controller inside that module and inject the newly created module. Check whether it is really required to have multiple modules in your app. From what I assume from the given code, you don't need multiple modules.
For eg, you can have the service in the same fooApp like this:
angular.module('fooApp').factory('Coub', ....);
angular.module('fooApp') -> gets the already registered module named fooApp and you can add controllers/services/directives etc to the same module.
So, if you add your given controller, service and config to the fooApp module, then you can define the module as
angular.module('fooApp', ['ngRoute']);
Whichever factory is listed first is always getting this error:
Uncaught Error: [$injector:unpr] Unknown provider: SocketProvider <- Socket
at ionic.bundle.js:13380
or
Error: [$injector:unpr] Unknown provider: CommandsProvider <- Commands <- Command
at ionic.bundle.js:25642
If it's put in one file like the starters are, they work fine, but that organization is horrible and this is the way I do it with regular Angular apps.
INDEX:
<script src="app.js"></script>
<script src="services/socket.service.js"></script>
<script src="services/commands.service.js"></script>
<script src="controllers/connect.controller.js"></script>
<script src="controllers/command.controller.js"></script>
Service structure:
socket.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Socket', Socket);
Socket.$inject = ['socketFactory'];
function Socket(socketFactory) {
// do factory stuff
}
}());
commands.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
Controller structure:
(function (){
'use strict';
angular.module('tacoCorp.controllers')
.controller('Command', Command);
Command.$inject = ['$scope', 'Socket', 'Commands'];
function Command($scope, Socket, Commands) {
// controller jamz
}
})();
You actually define module 'tacaCorp.services' two times thats why first module is overwritten...
You should write module defination in another file then get it at services js files...
(function(){
'use strict';
angular.module('tacoCorp.services', []);
}());
as you see we define module with no dependency. Next get module and add your services on it.
(function(){
'use strict';
angular.module('tacoCorp.services')
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
as you see for getting module you only have to call angular.module('tacoCorp.services') like that if you add second argument then you set it instead of get it, this is your mistake actually.
I try to add a controller to an existing module. But I always get the following error message:
Uncaught Error: [$injector:nomod] Module 'pmm' is not available! You
either misspelled the module name or forgot to load it.
app.js
(function() {
'use strict';
angular.module('pmm', [
'ui.router',
'ui.bootstrap', ...
])
})();
login.js
(function() {
'use strict';
angular
.module('pmm')
.controller('LoginCtrl',LoginCtrl);
function LoginCtrl() {
}
})();
Can you show HTML file? You probably didn't include app.js in it...