For simplicity, I will refer to my version of Angular 1x (1.6) as AngularJS and Angular 2 / 4x (4.0) as Angular.
I worked on porting a large AngularJS application to Angular using the UpgradeModule approach, as described in the official documentation.
The application works fine, but now I try to run all existing unit tests through Karma, and after quite a lot of Googling, I struggle to understand how to configure Karma.
Although my application is now a hybrid of Angular and AngularJS, all my existing modules are still written in AngularJS. ** I have not added any Angular modules yet, except for the root module that loads AngularJS.
My application is compiled using a combination of gulp> browserify> tsify. Here is a snippet of my build steps:
return function() {
var bundler = browserify([
'src/app.d.ts',
'src/app.ts',
'src/main.module.ajs.ts'
], {
debug: true
})
.plugin(tsify)
.transform(babelify.configure({
presets: ["es2015"]
}));
return bundler
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true,
sourceRoot: '/src'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.scripts.dest));
This is the main login file for my application:
app.ts
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './main.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['main']);
});
This is the Angular module:
main.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
})
export class AppModule {
ngDoBootstrap() {}
}
This is the AngularJS module:
main.module.ajs.ts
import './authentication/authentication.module';
import { MainController } from './main.controller';
import { CONFIGURATION } from '../config';
angular
.module('main', [
'authentication',
])
.controller('MainController', MainController)
.config(applicationRouting)
.run(applicationInit)
.constant('CONFIGURATION', CONFIGURATION);
function applicationInit($rootScope, CONFIGURATION) {
$rootScope.CONFIGURATION = CONFIGURATION;
}
function applicationRouting($routeProvider, $analyticsProvider) {
$analyticsProvider.firstPageview(false);
$analyticsProvider.virtualPageviews(false);
$routeProvider
.when('/?', {
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
.. and finally my karma configuration file:
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine'],
plugins: ['karma-jasmine', 'karma-chrome-launcher', 'karma-coverage', 'karma-ng-html2js-preprocessor', 'karma-browserify'],
files: [
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/lodash/lodash.min.js',
'node_modules/angular-messages/angular-messages.min.js',
'node_modules/angular-sanitize/angular-sanitize.min.js',
'node_modules/vis/dist/vis.min.js',
'node_modules/moment/min/moment.min.js',
'node_modules/pikaday/pikaday.js',
'node_modules/filesaver.js/FileSaver.min.js',
'node_modules/angulartics/src/angulartics.js',
'node_modules/angulartics/dist/angulartics-piwik.min.js',
'node_modules/jsencrypt/bin/jsencrypt.min.js',
'node_modules/d3/d3.min.js',
'node_modules/node-uuid/uuid.js',
'node_modules/angular-vs-repeat/src/angular-vs-repeat.js',
'src/**/*.module.js',
'src/**/!(*.spec).js',
'src/**/*.spec.js',
'src/**/*.tpl.html'
],
browserify: {
debug: true,
transform: [
['babelify', {
presets: ['es2015']
}]
]
},
preprocessors: {
'src/app.d.ts': ['browserify'],
'src/app.ts': ['browserify'],
'src/main.module.ajs.ts': ['browserify'],
'src/**/!(*.spec).js': ['browserify'],
'src/**/*.tpl.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'dir-templates'
},
reporters: ['dots'],
colors: true,
port: 9018,
runnerPort: 9101,
autoWatch: true,
browsers: [
'Chrome'
],
captureTimeout: 5000,
logLevel: 'DEBUG'
});
};
As you can see in the configuration file, I include all third-party libraries of my application. Before switching to the hybrid application, this setting worked fine, but I assume that now my application is essentially “wrapped” with the new Angular infrastructure, I will need to make some configuration changes.
I just don’t quite understand what is going to happen. When I try to run my tests with this setting, I get the following error:
Error: [$injector:modulerr] Failed to instantiate module routing due to:
Error: [$injector:modulerr] Failed to instantiate module authentication due to:
Error: [$injector:modulerr] Failed to instantiate module utils due to:
Error: [$injector:modulerr] Failed to instantiate module timeline due to:
Error: [$injector:modulerr] Failed to instantiate module events due to:
Error: [$injector:modulerr] Failed to instantiate module rest due to:
Error: [$injector:modulerr] Failed to instantiate module main due to:
Error: [$injector:nomod] Module 'main' 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.6.1/$injector/nomod?p0=main
at node_modules/angular/angular.js:68:12
at node_modules/angular/angular.js:2183:17
at ensure (node_modules/angular/angular.js:2107:38)
at module (node_modules/angular/angular.js:2181:14)
at node_modules/angular/angular.js:4736:22
at forEach (node_modules/angular/angular.js:357:20)
at loadModules (node_modules/angular/angular.js:4720:5)
at node_modules/angular/angular.js:4737:40
at forEach (node_modules/angular/angular.js:357:20)
at loadModules (node_modules/angular/angular.js:4720:5)
Thus, it clearly cannot find the “core” AngularJS module to run the tests.
! , .