Loading modules with dependencies in Jasmine - javascript

I have a module that is defined as this:
var angular_multi_select_engine = angular.module('angular-multi-select-engine', [
'angular-multi-select-constants'
]);
The engine depends on the constants module, as you can see.
I'm trying to run some tests on the engine, with this:
beforeEach(function() {
angular.mock.module('angular-multi-select-engine', 'angular-multi-select-constants');
});
But when I try to run jasmine, it says:
Error: [$injector:modulerr] Failed to instantiate module angular-multi-select-engine due to:
[$injector:nomod] Module 'angular-multi-select-engine' 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 try to load only the constants module, Jasmine works as expected and I can test the values of the constants module.
How should I load a module that has a dependency?

It turns out Jasmine is not loading the engine module because I have used ES6 syntax. I'll open a new question about that.

Related

Webpack doesn't add dependencies in AngularJs using the require() method

I probably have problem with webpack configuration, because the require() method in AngularJS DI doesn't work correctly. In my app use AngularJS, Webpack and ES6.
I'm trying to add a library angular-formly-templates-bootstrap. In the source code on GitHub I see the dependency added with:
const ngModule = angular.module(ngModuleName, [require('angular-formly')]);
After installing the library using Npm in the file I can see:
var ngModule = angular.module(ngModuleName, [__webpack_require__(4)]);
Unfortunately, firing this code returns me an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module {"version":{"full":"1.6.9","major":1,"minor":6,"dot":9,"codeName":"fiery-basilisk"},"callbacks":{}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
I can quickly fix the error by entering the dependency name in the library code:
var ngModule = angular.module(ngModuleName, ['formly']);
At this point, everything works as it should. Obviously, this is not the right solution. The only question is why the require() method doesn't properly inject dependencies?
Require doesn't work in browser.Basically require is a node_module by which we can access other modules or files.So please if you are using it on browser side then try other things like import or self.import or injecting.
Add this to your project: require.js
and take a look at this Require Api

Script for angular-google-analytics is not loading

I try to use angular-google-analytics for tracking traffic. I'm using angular 1.4.8.
Version of angular-google-analytics is 1.1.9. I included it in my bower.json file and linked script in my template.razr file as a showed below:
<script src='bower_components/angular-google-analytics/dist/angular-google-analytics.min.js'></script>
In main module of the app I did dependency injection as below in my .coffee file:
app = angular.module('speedUpApp', [
'angular-google-analytics',
'ngAnimate'
'ngCookies'
'ngSanitize'
'ngTouch'
'pascalprecht.translate'
'ui.router'
'ngMaterial'
'ngMap'
'slick'
'nl2br'
'lodash'
'angular-images-loaded'
'ui.select2'
'angular-iscroll'
'smoothScroll'
'angular-inview',
'dibari.angular-ellipsis'
'ngFileUpload'
])
First dependency is just angular-google-analytics. In spite of those steps after running my local server in my browser console I receive an error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module speedUpApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-analytics due to:
Error: [$injector:nomod] Module 'angular-google-analytics' 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.
Now I cannot recognize the problem, because I declared the angular-google-analytics module dependency and dependency injection too, despite of it, I still encounter this error. Any help?

Karma Error: [$injector:modulerr] Failed to instantiate module due to: (Index.html is working perfectly)

So I set up an angular js project in webstorm and everything works properly except for the karma testing suite
I am setting up the model as follows:
beforeEach(module('[modulename]'));
and my tests are:
it('should work', ((function() {
//spec body
expect(true).toBe(true);
})));
works and passes, but
it('should work, does it?', (inject(function(_$http_) {
//spec body
$http=_$http_;
expect(true).toBe(true);
})));
not only fails the test but suddenly my module is no longer loading :S
Error: [$injector:modulerr] Failed to instantiate [modulename] due to:
Error: [$injector:nomod] Module '[modulename]' 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.
why though even putting in both tests seems to work perfectly fine for the first test (without inject) - the second one still fails like previously stated...
IMPORTANT: everything works if I run my application in a browser window, so the error has to be in the test file or something :S
I'm rather new to angular js and karma so I hope this is not a stupid question.
Try using $httpBackend instead of $http. Also, injection and mocking should be done outside the test cases in the test setup phase. use beforeEach() block for any setup and instantiation code.

Failed to instantiate module formlyBootstrap

I've installed angular-formly-templates-bootstrap via bower on a project that I've been working on. But when I try to inject it in angular, I receive the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' 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.4.1/$injector/nomod?p0=formlyBootstrap
at http://localhost:3000/bower_components/angular/angular.js:68:12
at http://localhost:3000/bower_components/angular/angular.js:1949:17
at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
at http://localhost:3000/bower_components/angular/angular.js:4355:22
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
at http://localhost:3000/bower_components/angular/angular.js:4356:40
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
The problem is, bower doesn't load angular-formly-templates-bootstrap in the browser. There are some other packages which are being loaded to the browser with bower. But I don't know what the problem is with formlyBootstrap.
Are you using gulp for inject bower dependencies? If so, find in gulp config something like that
exports.wiredep = {
exclude: [/bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
So all files ended with 'bootstrap.js' not injected. You can chage it with something like that
exports.wiredep = {
exclude: [/[^-]bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
Got the same error. I was working with gulp angular generator which seems to be ignoring formly bootstrap. I changed the main file in bower_components for angular-formly-bootstrap-template to dist/...bootstrap.min.js. Started working after that. Seems like the generator was ignoring files having bootstrap.js at the end

Single Optimized Module returns Undefined in RequireJS

After I optimize an AMD module and it's dependencies using r.js I get this error....
Uncaught TypeError: undefined is not a function
If I load the unoptimized AMD module and have requirejs dynamically load all its dependencies, it works fine.
Here's how I load the module...
require(['jquery', "templates/mainmodule"],
function ($, mainmodule) {
var mainModuleObject = new mainmodule();
}
The main module and its dependencies are properly retrieved (I see it using Fiddler), but the main module is undefined when I try to instantiate it. My config mappings are proper, and shims for Underscore and jquery are also fine. Not using Backbone. Have exports for all non-AMD modules. There are no module loading errors appearing in console.
Ideas on how I can troubleshoot this?
Burned 8 hours solving this incredibly stupid issue.
Require JS Optimizer will create module ID's on the fly for your modules. When you specify "name" and "out" for the module you want to optimize, and the name of the optimized module respectively, "name" should be the module filepath WITHOUT ".js" at the end. "out" SHOULD have ".js" at the end. If you include ".js" to the end of the filepath of the module you are optimizing, it will add that suffix to the module ID, which, for whatever reason, kills the entire execution without ANY sort of error indicating a module ID issue. Holy shit.

Categories