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 myAppComponent
? - And what happens, if my
DynModule
imports something that is not already imported by myAppComponent
? What is SystemJs going to do?