2

Is it possible to use webpack and SystemJsNgModuleLoader at the same time in an Angular 5 web app?

I want to pack my main application (so that I only need to serve one file) and later dynamically load new modules (e.g. DynModule defined in dyn.ts/js) via SystemJsNgModuleLoader. As soon as I pack my app and try to dynamically load an NgModule it tells me, that it cannot find the module "./dyn".

Update: Before bundling, my app does a webrequest and loads ./dyn.js. After bundling it does not do any webrequest. I guess Webpack changes the behavior of my SystemJsNgModuleLoader. How can I get around this?

The following code does work if it is not packed:

app.component.ts

@Component({
    selector: 'my-app',
    template: `<button (click)="load()">load</button>`,
})
export class AppComponent {
    constructor(private loader: SystemJsNgModuleLoader) {
    }

    load() {
        new Promise((resolve, reject) => {
            this.loader.load("./dyn")
                .then();
        });
    }
}

After packing my app with the following config, I get the following error:

webpack.config.js

module.exports = {
    output: {
        filename: "./out.js"
    },
    entry: "./src/main.js",
}

Note: dyn.ts/js will not be included in my packed out.js since I load it dynamically.

out.js:51 ERROR Error: Uncaught (in promise): Error: Cannot find module "./dyn".

Error: Cannot find module "./dyn".
at eval (out.js:790)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (out.js:138)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (out.js:138)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at eval (out.js:790)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (out.js:138)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (out.js:138)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (out.js:138)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)

Assuming I can use webpack and SystemJsNgModuleLoader:

  • What happens, if my DynModule imports something that is already imported by my AppComponent?
  • And what happens, if my DynModule imports something that is not already imported by my AppComponent? What is SystemJs going to do?
Michael
  • 408
  • 3
  • 13
  • Have a look at my answer here: [https://stackoverflow.com/questions/50149016/load-new-modules-dynamically-in-run-time-with-angular-cli-angular-5/50395048#50395048](https://stackoverflow.com/questions/50149016/load-new-modules-dynamically-in-run-time-with-angular-cli-angular-5/50395048#50395048) – Michael Jul 04 '18 at 08:07

0 Answers0