Question

是否可以在Angular 5 Web应用程序中同时使用webpack和SystemJsNgModuleLoader？

我想打包我的主应用程序（这样我只需要提供一个文件），然后通过SystemJsNgModuleLoader动态加载新模块（例如DynModule中定义的dyn.ts/js）。一旦我打包我的应用程序并尝试动态加载NgModule它告诉我，它找不到模块＆＃34; ./ dyn＆＃34;。

更新：在捆绑之前，我的应用会执行webrequest并加载./dyn.js。捆绑后它不会做任何webrequest。我猜Webpack会改变我的SystemJsNgModuleLoader的行为。我怎么能绕过这个？

如果未打包，以下代码可以正常工作：

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();
        });
    }
}

使用以下配置打包我的应用程序后，出现以下错误：

webpack.config.js

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

注意：由于我动态加载dyn.ts/js，因此out.js将不会包含在我的打包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)中。

DynModule

假设我可以使用webpack和SystemJsNgModuleLoader：

如果我的AppComponent导入了我DynModule已导入的内容，会发生什么？
如果我的AppComponent导入了我<form action="/Home/Index" method='get'> <input type="date" name="Choisir une date"><br> <input type="submit" value="Submit"> <input type="reset"> </form>尚未导入的内容，会发生什么？ SystemJs会做什么？

webpack和SystemJsNgModuleLoader同时是Angular 5

0 个答案: