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
Related
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.
I'm beginning with the MEAN Stack and I'm struggling to do something I'm sure it's pretty basic.
I'm trying to inject a new instance of draw2d provided by their downloadable library.
I keep having :
"ncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module draw2d due to:
Error: [$injector:nomod] Module 'draw2d' 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."
Comming from :
modules/core/client/app/config.js
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'draw2d'];
Here are the other files :
modules/mymodule/client/controllers/projects.client.controller.js
...
ProjectsController.$inject = ['$scope', '$state', 'Authentication', 'projectResolve', 'draw2d'];
function ProjectsController ($scope, $state, Authentication, project, draw2d) {
$scope.$on('$viewContentLoaded', function(event){
var canvas = new draw2d.create('canvas');
}
);
...
modules/mymodule/client/services/draw2d.client.service.js
(function () {
'use strict';
angular
.module('mymodule')
.factory('draw2d', draw2d);
function draw2d() {
return {
create: function (divName) {
var Draw2d = draw2d;
return new Draw2d().Canvas('canvas');
}
};
}
})();
The module's package is in "public/lib/vendors/draw2d"
config/assets/default.js
'use strict';
module.exports = {
client: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css'
],
js: [
'public/lib/vendors/draw2d/lib/canvg.js',
'public/lib/vendors/draw2d/lib/Class.js',
'public/lib/vendors/draw2d/lib/jquery-1.10.2.min.js',
'public/lib/vendors/draw2d/lib/jquery-touch_punch.js',
'public/lib/vendors/draw2d/lib/jquery.autoresize.js',
'public/lib/vendors/draw2d/lib/jquery.contextmenu.js',
'public/lib/vendors/draw2d/lib/json2.js',
'public/lib/vendors/draw2d/lib/pathfinding-browser.min.js',
'public/lib/vendors/draw2d/lib/raphael.js',
'public/lib/vendors/draw2d/lib/rgbcolor.js',
'public/lib/vendors/draw2d/lib/shifty.js',
'public/lib/vendors/draw2d/lib/StackBlur.js',
'public/lib/vendors/draw2d/src/draw2d.js',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js'
],
tests: ['public/lib/angular-mocks/angular-mocks.js']
},
css: [
'modules/*/client/css/*.css',
'public/lib/vendors/draw2d/css/contextmenu.css'
],
less: [
'modules/*/client/less/*.less'
],
sass: [
'modules/*/client/scss/*.scss'
],
js: [
'modules/core/client/app/config.js',
'modules/core/client/app/init.js',
'modules/*/client/*.js',
'modules/*/client/**/*.js'
],
views: ['modules/*/client/views/**/*.html'],
templates: ['build/templates.js']
},
server: {
gruntConfig: 'gruntfile.js',
gulpConfig: 'gulpfile.js',
allJS: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'],
models: 'modules/*/server/models/**/*.js',
routes: ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],
sockets: 'modules/*/server/sockets/**/*.js',
config: 'modules/*/server/config/*.js',
policies: 'modules/*/server/policies/*.js',
views: 'modules/*/server/views/*.html'
}
};
modules/mymodule/core.client.module.js
(function (app) {
'use strict';
app.registerModule('mymodule', ['core']);// The core module is required for special route handling; see /core/client/config/core.client.routes
app.registerModule('mymodule.services');
app.registerModule('kmymodule.routes', ['ui.router', 'mymodule.services']);
})(ApplicationConfiguration);
Can you please help me in explaining me what I did miss ?
Thanks a lot for your precious help ! :)
Oh boy, I found what was providing this error.
I didn't have to declare it in the project dependency.
Works now...
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...
I have been trying to inject the other module(account.js) into main module (app.js) in a SPA using angularJs as given below
var app = angular.module('UniversityApp', ['ngAnimate', 'ngRoute', 'ngResource', 'ui.bootstrap', 'landing','account']);
angular.bootstrap(document, ['UniversityApp']); throws error "Uncaught Error: No module: myApp "
It should be
angular.bootstrap(document, ['UniversityApp']);
instead
angular.bootstrap(document, ['myApp']);
According to the doc
I have a an angular app and in it I can see this coffee in the app.coffee file....
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
angular.module('app.services', ['ngResource'])
angular.module('app.controllers',[])
angular.module('app.directives', [])
angular.module('app.filters', [])
angular.module('app.templates', [])
angular.module('app.models', [])
I don't really understand why I have to inject ngResource into the app.services module direct AND into the app module. Surely I can just wire up All dependencies into the app module and then it will allow global access to the rest of the modules?
When you write
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
this means these are the dependencies of your app.
When you write
angular.module('app.services', ['ngResource'])
this means app.services has a dependency ngResource. About your question as to why you need to write it again. It is fairly simple, app.services uses ngResource. If you don't want the whole app to have ngResouce dependency, you can ignore it in the first line, but it has to be there for app.services
You can read more about it here