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.

what version of webpack are you using? if you use v3, you can use import() function if you know the module name at the build time. check this thread. I used SystemJS because the module name was not known during build time and webpack can't load modules it doesn't know about during build time — Max Koretskyi
– Max Koretskyi, Commented Sep 5, 2017 at 16:12
Thanks for the quick reply, but this exactly how i need to implement it. The modules won't be known at build time. Maybe i should rather post a question into the ionic forum on how to add systemJS. — malua
– malua, Commented Sep 5, 2017 at 16:46
then you can't use webpack to load modules dynamically. you either have to use SystemJS or FuseBox — Max Koretskyi
– Max Koretskyi, Commented Sep 5, 2017 at 19:12

Joel Davey · Accepted Answer · 2018-01-16 17:39:44Z

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.

answered Jan 16, 2018 at 17:39

Joel Davey

2,6631 gold badge24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - dynamic module loading and compilation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related