I have Mean.js architecture, and i need to make some modals windows. But when I'm include ['ngAnimate', 'mgcrea.ngStrap'] I have this issue:
Uncaught Error: [$injector:nomod] Module 'undefined' 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.
I have already included angular-strap components:
all.js
js: [
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-cookies/angular-cookies.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-touch/angular-touch.js',
'public/lib/angular-sanitize/angular-sanitize.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-strap/dist/angular-strap.min.js',
'public/lib/angular-strap/dist/angular-strap.tpl.min.js',
'public/lib/angular-strap/dist/modules/modal.min.js',
'public/lib/angular-strap/dist/modules/modal.tpl.min.js',
'public/lib/angular-animate/angular-animate.min.js',
'public/lib/lodash/dist/lodash.js',
]
controller.js:
'use strict';
angular.module('angular-strap' ['ngAnimate', 'mgcrea.ngStrap']).controller('AngularStrapController', ['$scope',
function($scope) {
$scope.modal = {
"title": "Title",
"content": "Hello Modal<br />This is a multiline message!"
}
}
])
Can anybody help me with this issue?
You're missing a comma after angular-strap
Correct:
angular.module('angular-strap' , ['ngAnimate', 'mgcrea.ngStrap'])
Related
I am using mean.js boilerplate. I would like to include angular-stripe in my client side. For that I have installed angular-stripe and it is available under node_modules.
Now I would like to add it in my code as follows
(function () {
'use strict';
angular
.module('myApp', [
'angular-stripe'
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
PaymentController.$inject = ['$scope', '$state', 'Authentication', 'Socket', 'stripe'];
function PaymentController($scope, $state, Authentication, Socket, stripe) {
var vm = this;
}
());
It throws the folowing error
Module 'angular-stripe' 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.
If you're using MeanJs boilerplate, you have to add your dependencies at config/assets/default.js in client - lib and client-css if the dependecy has a .css file.
module.exports = {
client: {
lib: {
css: [
// bower:css
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
'public/lib/angular-ui-notification/dist/angular-ui-notification.css'
// endbower
],
js: [
// bower:js
'node_modules/angular-stripe/src/index.js',
'public/lib/angular/angular.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/ng-file-upload/ng-file-upload.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-mocks/angular-mocks.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-ui-notification/dist/angular-ui-notification.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js',
// endbower
], // rest of the code..
MeanJs highly recommend to use bower for your frontend dependencies.
For more info: MeanJS docs
The problem is that the angular-stripe plugin is not included when the angular module is declared.
When using js modules from node_modules, use the global require() method in your module declaration instead
angular.module('myApp', [
require('angular-stripe')
]);
The other solution is to include the files the "standard" way <script src="....
Good blog post about the require method here
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...
Includes:
angular/angular.min.js
angular-route/angular-route.min.js
angular-messages/angular-messages.min.js
This is my module.
var axipay = angular.module('axipay', [
'ngRoute',
'ngMessages',
'ngMessagesInclude',
'axipay.registration',
])
I used it like this.
<div ng-messages="form_register.phone.$error">
<div ng-messages-include="error-messages.html"></div>
</div>
This gets an error when loaded.
Failed to instantiate module ngMessagesInclude due to: Error:
[$injector:nomod] Module 'ngMessagesInclude' 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 working correctly without 'ngMessagesInclude'.
Ref:
https://docs.angularjs.org/api/ngMessages
https://docs.angularjs.org/api/ngMessages/directive/ngMessagesInclude
There is no module named ngMessagesInclude. Once you define the ngMessages dependency, you can access the ng-messages-include directive. So, remove the ngMessagesInclude dependency.
var axipay = angular.module('axipay', [
'ngRoute',
'ngMessages',
'axipay.registration',
])
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