Настройка конфигурации Karma для гибридного Angular 2/1x приложения

Для простоты я буду ссылаться на мою версию Angular 1x (1.6) как AngularJS и Angular 2/4x (4.0) как Angular.

Я работал над переносом большого приложения AngularJS на Angular, используя подход UpgradeModule, как описано в официальной документации .

Приложение работает нормально, но теперь я пытаюсь запустить все существующие модульные тесты через Karma, и после довольно многого Googling я изо всех сил пытаюсь понять, как настроить конфигурацию 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']);
});

Это модуль 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'
    });
};

Как вы можете видеть в файле конфигурации, я включаю все сторонние библиотеки моего приложения. До перехода на гибридное приложение эта настройка работала нормально, но я предполагаю, что теперь мое приложение по существу "завернуто" с новой инфраструктурой 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 для запуска тестов.

Любая помощь будет принята с благодарностью! Дайте мне знать, если вам нужна дополнительная информация.

Ответ 1