Use SystemJS module in webpack?


I'm trying to use a 3rd party component library named wijmo with Angular 2. SystemJS has given us no end of trouble though, but we got it to work. I'm excited to see that angular-cli is moving to webpack, and the sample project is fast.

The problem is that wijmo seems to only include a minified file for their angular 2 components, and adding them to the angular-cli throws an error that 'System' is not defined because SystemJS isn't used anymore. Is there any way to use that minified SystemJS javascript file with the new angular-cli or webpack 2?

The import and usage looks like this, and intellisense works because we have the .d.ts files in a node module in our project:

import * as wjInput from 'wijmo/wijmo.angular2.input';

directives: [wjInput.WjInputDateTime]

I naively thought I could hack the angular-cli and add an external to the config, but then I get the 'System is not defined' error:

external: {
  "wijmo": "wijmo"


As of now Wijmo doesn't have a direct way to map module names to files with the 'min.js' extenstion in Angular CLI. However this is supported in Webpack, SystemJS and AMD. The temporary workaround is to change the 'min.js' extension to 'js'.

Here is a recent blog post with details about this issues and a prerelease build to use the different module loaders. Integrating Wijmo Controls with Module Loaders and Bundlers

By : T. Taylor

This video can help you solving your question :)
By: admin