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

Question

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

I keep getting the error below about System.import.

Answer 1

I fixed this by moving the bootstrap code out of the config code. Apparently when using the karma-systemjs plugin System.import is not available yet when this is called (although it is at normal runtime).

What I did: I moved the bootstrap code (i.e. Promise.all([....) into into a separate file called bootstrap.js (name is not important) and then in my index.html I added them in this order:

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

I see the problem. It's because you've got your bootstrapping code (eg. System.import() calls) inside your SystemJS config file - system.conf.js karma-systemjs expects just a simple System.config() call that it can then intercept to find out where your transpiler and polyfills are. It does this by evaluating your config file with a fake System object which simply records whatever is passed to System.config(). This fake object has no System.import() method, which causes your error.

I'd recommend moving your bootstrapping code into a separate file (I personally put it in a script tag with my HTML). Otherwise you'll run into similar problems if you try to use systemjs-builder, and you probably don't want angular.bootstrap() to be called at the start of your unit tests.