Angularjs 为混合角度2/1x应用程序设置Karma配置

为了简单起见，我将我的Angular1X版本（1.6）称为AngularJS，Angular2/4x（4.0）称为AngularJS

我一直在使用升级模块方法将大型AngularJS应用程序迁移到AngularJS，如中所述

该应用程序运行良好，但我现在正试图通过Karma运行所有现有的单元测试，在谷歌搜索了相当长一段时间后，我很难准确地理解Karma配置需要如何设置

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

我的应用程序是通过组合使用

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

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

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

这是角度模块：

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

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

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

这是AngularJS模块：

main.module.ajs.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']);
});

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

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配置文件：

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模块来运行测试

---

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

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

---

有一种名为

registerForNg1Tests（）

的升级适配器的黄金方法，您应该尝试一下。这是一个完整的指南

可能需要很长的时间，但是当与

browserify

绑定时，angularjs文件不应该首先是angularjs文件，然后是angular4文件吗？我不确定这两方面是否重要。不幸的是，这不是问题所在，谢谢你！