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...
Related
I've been trying to refactor my old AngularJS app for a better structure, first, i'm breaking down controllers to components , I'm following this syntax, but get error failed to instantiate module, and component not registered. my component looks like:
angular.module('app')
.component('LoginComponent', {})
.controller('LoginController', ['$scope', function ($scope,) { }]);
and in my app.js
var app = angular.module('app', [
'ngMaterial',
'LoginComponent'
]);
in my webpack:
module.exports = {
entry: ['path/login.component.js',
],
};
I am trying to use webpack in my existing angularjs [1.4.7] application. I have one custom module which is getting generated as a bundle using webpack. I am later adding that custom module as a dependency in some other module. I don't get any error while generating bundle. But when I use this module as a dependency , it's throwing below error. I have tried everything possible and can't understand what's wrong here.
Error
Failed to instantiate module Module2 due to:
Error: [$injector:modulerr]..........
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
Code Snippet
webpack.config.js
module.exports = {
entry: {
app: [ './src/main/resources/js/app/app.module.js' ]
},
output: {
filename: './src/main/resources/js/app/bundle.js'
},
node: {
module: "empty",
net:"empty",
fs: "empty"
},
watch: false
};
app.module.js
'use strict';
var angular = require('angular');
module.exports = angular.module('module1', [
require('./components/services').name,
require('./components/controllers').name,
require('./components/directives').name
]);
components/services/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('services',[])
.factory('Service1', require('./Service1'))
.factory( 'Service2' , require('.Service2'))
components/services/service1.js
module.exports = function Service1( $q)
{
var service1 = {};
// service implementation
return service1;
};
components/controllers/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('controllers',[])
.controller('controller1' , require('./controller1'))
.controller('controller2' , require('./controller2'));
components/directives/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('directives',['services'])
.directive('directive1', require('./directive1'))
.directive('directive2' , require('./directive2'))
index.html
<script src="bundle.js" type="text/javascript"></script>
another app.js
var app2 = angular.module('Module2',['ui.router','ui.bootstrap','module1']);
Try adding your second module in the entry:
entry: {
app: [
'./src/main/resources/js/app/app.module.js',
'./src/main/resources/js/app/app.js'
]
},
It will help defining your module at first. Also I didn't see any reference to module2 in your code.
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 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'm trying for the first time to use AngularJS in conjunction with RequireJS using this guide as a basis. As far I can tell after a lot of debugging I'm loading all my modules in the correct order, but when the application runs Angular throws an Error / Exception with the following message:
Argument 'fn' is not a function, got string from myApp
I've seen this message before due to syntax errors, so even though I've looked trough the code multiple times I won't rule out the possibility of a simple syntax error. Not making a Fiddle just yet in case it is something as simple as a syntax error, but I'll of course do so if requested.
Update: I just noticed when setting ng-app="myApp" in the <html> tag I also get an additional error,
No module: myApp
Update II: Okay, it turns out it indeed was an syntax error in the only file not included below. I am though still left with the problem from update I.
RequireJS bootstrap
'use strict';
define([
'require',
'angular',
'app/myApp/app',
'app/myApp/routes'
], function(require, ng) {
require(['domReady'], function(domReady) {
ng.bootstrap(domReady, ['myApp']);
});
});
app.js
'use strict';
define([
'angular',
'./controllers/index'
], function(ng) {
return ng.module('myApp', [
'myApp.controllers'
]);
}
);
controllers/index
'use strict';
define([
'./front-page-ctrl'
], function() {
});
controllers/module
'use strict';
define(['angular'], function (ng) {
return ng.module('myApp.controllers', []);
});
controllers/front-page-ctrl
'use strict';
define(['./module'], function(controllers) {
controllers.
controller('FrontPageCtrl', ['$scope',
function($scope) {
console.log('I\'m alive!');
}
]);
});
Delete ng-app="myApp" from your html.
Because it has bootstrapped manually
ng.bootstrap(domReady, ['myApp']);
RequireJS docs on Dom ready state:
Since DOM ready is a common application need, ideally the nested
functions in the API above could be avoided. The domReady module also
implements the Loader Plugin API, so you can use the loader plugin
syntax (notice the ! in the domReady dependency) to force the
require() callback function to wait for the DOM to be ready before
executing. domReady will return the current document when used as a
loader plugin:
So, when you require 'domReady' the result is a function:
function domReady(callback) {
if (isPageLoaded) {
callback(doc);
} else {
readyCalls.push(callback);
}
return domReady;
}
But when you append the domReady string with ! sign the result will be the actual document element:
'use strict';
define([
'require',
'angular',
'app/myApp/app',
'app/myApp/routes'
], function(require, ng) {
require(['domReady!'], function(domReady) {
// domReady is now a document element
ng.bootstrap(domReady, ['myApp']);
});
});