Angular - dynamic module loading and compilation

Question

I am developing an Ionic 3 / Angular 4 app with cordova. we need to be able to create modules/components independently from the app to quickly change e.g. information pages. I have read this:

Article

specifically, I am trying to do what the author did under

dynamic component loading and compilation

@ViewChild('vc', {read: ViewContainerRef}) _container: ViewContainerRef;

System.import('http://localhost:8080/path/to/js/file.js').then((module) => {
        this._compiler.compileModuleAndAllComponentsAsync(module.ExampleModule)
            .then((compiled) => {
                const factory = compiled.componentFactories[0];
                this._container.createComponent(factory);
            })
    })

This is working in in the example application found on Github.

But as far as I know ionic/angular uses webpack and I don't want to replace Webpack with SystemJS (if thats even possible). I just want to use the System.import() from SystemJS or a similar thing with Webpack. And i just don't know how to configure that.

Right now i am getting this error:

ERROR Error: Uncaught (in promise): Error: Cannot find module 'http://localhost:8080/path/to/js/file.js'.
Error: Cannot find module 'http://localhost:8080/path/to/js/file.js'.
    at script-loader lazy:2
    at new t (polyfills.js:3)
    at webpackEmptyAsyncContext (script-loader lazy:2)
    at ScriptLoaderProvider.webpackJsonp.333.ScriptLoaderProvider.loadScript (script-loader.ts:19)
    at FlexiPage.webpackJsonp.112.FlexiPage.ionViewDidLoad (flexi.ts:38)
    at ViewController._lifecycle (view-controller.js:566)
    at ViewController._didLoad (view-controller.js:439)
    at NavControllerBase._didLoad (nav-controller-base.js:950)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at script-loader lazy:2
    at new t (polyfills.js:3)
    at webpackEmptyAsyncContext (script-loader lazy:2)
    at ScriptLoaderProvider.webpackJsonp.333.ScriptLoaderProvider.loadScript (script-loader.ts:19)
    at FlexiPage.webpackJsonp.112.FlexiPage.ionViewDidLoad (flexi.ts:38)
    at ViewController._lifecycle (view-controller.js:566)
    at ViewController._didLoad (view-controller.js:439)
    at NavControllerBase._didLoad (nav-controller-base.js:950)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:3881)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at HTMLElement.invoke (polyfills.js:3)

It looks like it doesn't find the resource, but I think it is a misconfiguration with SystemJS, as it works in the sample app. Actually the first problem i am facing is, how to properly add SystemJS to the Ionic app.

If anyone has some insight, i would appreciate it very much.

Answer 1

The angular compiler is not included at runtime in AOT compilation (default for Ionic production builds), it's not a good idea to not use AOT for ionic as you want the app to be as fast as possible.