SystemJS и KarmaJS: TypeError: System.import не является функцией

Я пытаюсь заставить свой проект работать с Karma и SystemJS. Я использую плагин karma-systemjs с кармой.

Я все время получаю сообщение об ошибке System.import ниже.

Я верю в то, что SystemJS не загружается к моменту запуска плагина karma-systemjs. Подскажите пожалуйста, что я делаю не так.

Структура проекта

введите здесь описание изображения

Конфигурация SystemJS (system.conf.js)

System.config({
    baseUrl: '',
    defaultJSExtensions: true,
    map: {
        'jquery': 'vendor/kendo/js/jquery.min.js',
        'angular': 'vendor/kendo/js/angular.js',
        'kendo': 'vendor/kendo/js/kendo.all.min.js',
        'angular-mocks': 'vendor/bower_components/angular-mocks/angular-mocks.js',
        'angular-ui-router': 'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js',
        'angular-toastr': 'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js',
        'angular-local-storage': 'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min.js'
    },
    paths: {
        'systemjs': 'vendor/bower_components/system.js/dist/system.js',
        'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'  
    },
    meta: {
        'vendor/kendo/js/jquery.min.js': {
            format: 'global',
            exports: '$'
        },
        'vendor/kendo/js/angular.js': {
            format: 'global',
            deps: [
                'vendor/kendo/js/jquery.min.js'
            ],
            exports: 'angular'
        },
        'vendor/kendo/js/kendo.all.min.js': {
            format: 'global',
            deps: [
                'vendor/kendo/js/angular.js'
            ],
            exports: 'kendo'
        },
        'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js': {
            format: 'global',
            deps: [
                'vendor/kendo/js/angular.js'
            ]
        },
        'vendor/bower_components/angular-mocks/angular-mocks.js': {
            format: 'global',
            deps: [
                'vendor/kendo/js/angular.js'
            ],
            exports: 'angular.mock'
        },
        'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js': {
            format: 'global',
            deps: [
                'vendor/kendo/js/angular.js'
            ]
        },
        'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min': {
            format: 'global',
            deps: [
                'vendor/kendo/js/angular.js'
            ]
        }
    }
});
Promise.all([
    System.import('kendo'),
    System.import('angular-mocks'),
    System.import('angular-ui-router'),
    System.import('angular-toastr'),
    System.import('angular-local-storage')
]).then(function () {
    System.import('angular')
        .then(function (angular) {
        System.import('ng/app/app.module')
            .then(function (app) {
            angular.bootstrap(document, ['s9.app']);
        }, function (err) {
            console.log(err);
        });
    }, function (err) {
        console.log(err);
    });
});

//# sourceMappingURL=system.conf.js.map

karma.conf.js

// Karma configuration
var configure = function (config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '.',
        transpiler: null,
        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['systemjs', 'jasmine'],
        systemjs: {
            // Path to your SystemJS configuration file
            configFile: 'system.conf.js',
            // Patterns for files that you want Karma to make available, but not loaded until a module
            //     requests them. eg. Third-party libraries.
            serveFiles: [
                'vendor/kendo/js/**/*.js',
                'vendor/bower_components/**/*.js',
                'ng/**/*.js',
                'test/**/*Spec.js'
            ],
            config: {
                paths: {
                    'systemjs': 'vendor/bower_components/system.js/dist/system.js',
                    'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'
                }
            }
        },
        // list of files / patterns to load in the browser
        files: [
            {pattern: 'vendor/kendo/js/**/*.js', included: false},
            {pattern: 'vendor/bower_components/**/*.js', included: false},
            {pattern: 'ng/**/*.js', included: false},
            {pattern: 'test/**/*Spec.js', included: false}
        ],
        // list of files to exclude
        exclude: [],
        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {},
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],
        // web server port
        port: 9876,
        // enable / disable colors in the output (reporters and logs)
        colors: true,
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_DEBUG,
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['PhantomJS'],
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,
        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity
    });
};
module.exports = configure;

//# sourceMappingURL=karma.conf.js.map

Ошибка

введите здесь описание изображения


person Mike Cheel    schedule 25.02.2016    source источник


Ответы (1)


Я исправил это, убрав код начальной загрузки из кода конфигурации. По-видимому, при использовании плагина karma-systemjs System.import еще не доступен, когда он вызывается (хотя он находится в обычном режиме выполнения).

Что я сделал: я переместил код начальной загрузки (например, Promise.all ([....) в отдельный файл с именем bootstrap.js (имя не имеет значения), а затем в свой index.html Я добавил их в таком порядке:

введите здесь описание изображения

Также по этой ссылке (говорит автор плагина karma system js): https://github.com/rolaveric/karma-systemjs/issues/71

Я вижу проблему. Это потому, что у вас есть код начальной загрузки (например, вызовы System.import ()) внутри вашего файла конфигурации SystemJS - system.conf.js karma-systemjs ожидает только простой вызов System.config (), который он затем может перехватить, чтобы найти где находятся ваш транспиллер и полифиллы. Он делает это, оценивая ваш файл конфигурации с помощью поддельного объекта System, который просто записывает все, что передается в System.config (). У этого фальшивого объекта нет метода System.import (), который вызывает вашу ошибку.

Я бы рекомендовал переместить ваш код начальной загрузки в отдельный файл (я лично поместил его в тег скрипта с моим HTML). В противном случае вы столкнетесь с аналогичными проблемами, если попытаетесь использовать systemjs-builder, и вы, вероятно, не захотите, чтобы angular.bootstrap () вызывалась в начале ваших модульных тестов.

person Mike Cheel    schedule 30.04.2016
comment
Я столкнулся с этой проблемой с system.import в моем karma.shim.js. Куда вы переместили этот импорт? Я все еще новичок в karma, systemjs и др. - person Feasoron; 21.03.2017