SystemJS and KarmaJS: TypeError: System.import is not a function

Question

I am trying to get my project to work with Karma and SystemJS. I am using karma-systemjs plugin with karma.

I keep getting the error below about System.import.

I believe that this is due to the fact that SystemJS does not load at the time the karma-systemjs plugin is launched. Please tell me what I am doing wrong.

Project structure

SystemJS Configuration (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 

Mistake

Answer 1

I fixed this by moving the boot code from the configuration code. Apparently, when using the karma-systemjs plugin, System.import is not yet available when it is called (although it is in normal execution mode).

What I did: I moved the boot code (that is, Promise.all ([....) to a separate file called bootstrap.js (the name is not important), and then in my index.html I added them in the following order:

Also from this link (says the author of the jarm plugin): https://github.com/rolaveric/karma-systemjs/issues/71

I see a problem. This is because you have bootstrap code (e.g. calls to System.import ()) inside the SystemJS configuration file - system.conf.js karma-systemjs expects just a simple System.config () call so that it can intercept to find out where is your transpiler and polyfill. It does this by evaluating your configuration file with a fake System object, which simply records everything that is passed to System.config (). This fake object does not have a System.import () method that causes your error.

I would recommend moving your boot code to a separate file (I personally put it in a script tag with my HTML). Otherwise, you will run into similar problems if you try to use systemjs-builder, and you probably do not want angular.bootstrap () to be called at the beginning of your device tests.