I have installed angular-stripe and have included it in controller as follows
angular
.module('payments', [
"angular-stripe"
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
But the following error is thrown.
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.
(function (app) {
'use strict';
app.registerModule('payments');
}(ApplicationConfiguration));
You have to include this script in your application :
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
And angular-stripe.js :
<script src="npm-folder/angular-stripe.js"></script>
I hope this would help you!
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 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
The angularjs style guide recommends using IIFEs to wrap angular components. However when I try to wrap mine as per the example, I run into the problem of them being "hidden" from angularjs and it is unable to load them
page.html
<script type="text/javascript" src="my-module.js" %}"></script>
<script type="text/javascript" src="my-module-controller.js" %}"></script>
<div ng-app="my.app" ng-controller="MyAppController">
{{ somevar }}
</div>
my-app.js
(function() {
'use strict';
angular
.module('my.app', []);
});
my-app-controller.js
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module my.app due to:
Error: [$injector:nomod] Module 'my.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.
If I remove the IIFE on the module declaration so I'm left with the following:
'use strict';
angular
.module('my.app', []);
It works, to the extent that the next error is:
Error: [ng:areq] Argument 'MyAppController' is not a function, got undefined
If I remove the IIEF from the controller definition, everything works as expected.
This is obviously a stripped down example, in the real project I am serving this page from a Django server, though I can't tell if that's relevant or not.
Those are not IIFE's. You are not invoking the function. End with }()); or })();
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
})();
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...
In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' 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.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload