Angular Code working in Plunker but not on Angular CLI project

Question

I have a script which includes this code:

const importer = url => Observable.fromPromise(System.import(url));

The problem is that in an Angular CLI generated project it complains saying it doesn't know name: 'System' but if you use it on a Plunker Angular project it doesn't complain.

I know Plunker uses systemjs in it.

Is this the reason why I get the error on an Angular CLI project?

If so, is there a workaround so I can either use System.import or use an alternative?

Answer 1

SystemJS is a dynamic module loader. It's extensively used in plnkr and other online code sandboxes since it works well for that use case - development only browser environment.

Angular CLI takes care of bundling and loading dynamically your code (using Webpack in the background). It comes with a more advanced build system which produces optimized (AOT) production bundles.

You shouldn't use SystemJS in an Angular CLI project since you can get all of its functionality by just sticking to the default project configuration or ejecting (using the raw Webpack configuration) if you need something really advanced.

Here is a GitHub issue to confirm this.