Question

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

我一直致力于使用official documentation中记录的UpgradeModule方法将大型AngularJS应用迁移到Angular。

该应用程序正常运行，但我现在正尝试通过Karma运行所有现有的单元测试，经过相当多的谷歌搜索后，我很难理解我的Karma配置需要如何建立。

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

我的应用是使用gulp＆gt;的组合编译的browserify＆gt; 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']);
});

这是Angular模块：

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

正如您在配置文件中看到的那样，我包含了我所有应用程序的第三方库。在切换到混合应用程序之前，这个设置工作正常，但我认为现在我的应用程序基本上已经包装了＃39;使用新的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)

所以它显然无法找到主要的＆＃39; AngularJS模块为了运行测试。

任何帮助将不胜感激！如果您需要更多信息，请与我们联系。

Answer 1

这是一个非常老的问题，我不知道它是否仍然有用，但是这里是：

您应该尝试一种名为UpgradeAdapter的黄金方法registerForNg1Tests()。 Here是完整指南。

为Hybrid Angular 2 / 1x app设置Karma配置

1 个答案: