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