How to fix "Module is not available!" when unit testing a Hybrid Angular app

Question

I have a hybrid angular app and unit testing with Karma-Jasmine but we hit a small problem. I have a factory and component that is downgraded as an AngularJS app with:

angular
    .module('app.admin.branding')
    .factory('brandingFactory', downgradeInjectable(BrandingFactory));

angular
    .module('app.admin.branding')
    .directive('BrandNameComponent', downgradeComponent({
        component: BrandNameComponent
    }));

but it returns a Module 'app.admin.branding' is not available! upon running ng test

so the solution was adding brackets.

angular
    .module('app.admin.branding', [])

for both the component and factory. It works and the unit tests runs but when running on the browser and navigates to a page where the component is used an unknown error occurs and redirected to the main page.

So we just removed the brackets for both classes as it affected our production app. How do we fix our unit test error Module 'app.admin.branding' is not available or is there any workaround with the brackets approach so that it won't redirect?

Answer 1

Short answer;

Not quite sure about your setup, there might be a number of problems. The first thing to try is to use angular.mock.module , like so;

beforeEach(() => TestBed.configureTestingModule({}));
beforeEach(angular.mock.module('app.admin.branding'));

See documentation here

Hopefully this is all that you need

Longer answer;

You may also have a problem with your "import chain".

As you have noticed the angularJS module gets created when you execute angular.module('app.admin.branding', []) . When you append services, directives etc to this module you refer to it without the brackets.

When creating a hybrid app you need to be careful when creating the "import chain", ie the chain of import statements that link your app together.

Below is the structure of a working angular hybrid created with angular-cli.

The app-ajs folder contains the angularJS app and each folder below this directory contains an index.ts file that imports all directives, services etc inside the folder.

The first index.ts file in our application looks like this;

// Vendor dependencies;
import './../../node_modules/adal-angular/dist/adal-angular.min';
import './../../node_modules/angular-cookies/angular-cookies.min';
// ...etc.

// App dependencies...
import './app.module';
import './appDependencies.module';
import './subfolder1';  // In reality this is an app area, just to show the idea!
import './subfolder2';

And an index.ts below a sub folder may look something like this;

import './some.module';
import './some.service';
import './some.directive';

In this case there would be a file named some.module.ts inside that folder that would contain the call to register to module (ie angular.module('some.module', []) )

Creating this import chain is a bit tedious, but once you have it in place you can use it from both your main.ts and test.ts by importing it like this:

import "./app-ajs";

This makes sure you run the same code in production as in your tests.

Hope this helps.

Answer 2

Starting with Angular 8, there is createAngularJSTestingModule . See https://angular.io/api/upgrade/static/testing/createAngularJSTestingModule for an example.