为 Hybrid Angular 2/1x 应用程序设置 Karma 配置

Question

为简单起见，我将我的Angular 1x版本(1.6)称为AngularJS，将Angular 2/4x(4.0)称为Angular。

我一直在努力将一个大型的AngularJS应用程序迁移到Angular，使用官方文档中记录的UpgradeModule方法。

该应用程序运行良好，但我现在正在尝试通过 Karma 运行所有现有的单元测试，经过相当多的谷歌搜索，我正在努力了解我的 Karma 配置需要如何设置。

尽管我的应用程序现在是 Angular 和 AngularJS 的混合体，但我所有现有的模块仍然是用 AngularJS 编写的。 **我还没有添加任何 Angular 模块，除了引导 AngularJS 的根模块。

我的应用程序是使用gulp>browserify>tsify的组合编译的。以下是我的构建步骤片段：

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));

这是我的应用程序的主要入口文件：

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']);
});

这是角度模块：

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() {}
}

这是 AngularJS 模块：

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: '/'
});
}

..最后，我的业力配置文件：

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'
});
};

正如您在配置文件中看到的，我包含了我应用程序的所有第三方库。在切换到混合应用程序之前，此设置工作正常，但我假设现在我的应用程序基本上被新的 Angular 框架"包装"，我需要做一些配置更改。

我只是不完全清楚需要发生什么。当我尝试使用此设置运行测试时，出现以下错误：

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)

因此，它显然无法找到"主要"AngularJS模块来运行测试。

任何帮助将不胜感激！如果您需要更多信息，请告诉我。

Answer 1

嗯，这是一个非常古老的问题，我不知道它是否仍然相关，但这里是：

有一种黄金UpgradeAdapter方法叫做registerForNg1Tests()，你应该尝试一下。这是一个完整的指南。