Angular2 + Webpack2 + Express + HMR +延迟加载模块

Question

有没有人有一个懒惰加载的模块使用Webpack2作为捆绑器？我觉得我疯了。

我使用Visual Studio Code将我的TS文件编译成JS文件，然后再将它们与Webpack2捆绑在一起。

我尝试过以下简单示例，显示使用angular2路由延迟加载模块，例如：

{ path: 'feature', loadChildren: './+feature/feature.module#FeatureModule' }

这种平局并不奏效。我已经尝试过我能想到的各种技巧组合，包括：

• ./，/的每个排列，只是＆＃39; +功能＆＃39;等等
• 创建一个名为＆＃39; feature-module＆＃39; （通过我的webpack配置中的条目）并尝试了那个
的排列

这些总是导致找不到毯子＆＃34;模块＆＃34;激活要素路线时控制台中出错。

我尝试过在github上挖掘的hack，这需要使用一些非常有问题的语法，例如：

{ path: 'feature', loadChildren: ()=> new Promise(resolve => (require as any).ensure([], require => resolve(require('./+feature/feature.module).FeatureModule))) }

这确实有效，因为它会在请求路径时加载模块并按预期在浏览器中呈现它。

然而，我想使用webpack的主要原因是热重新加载。

我使用快速服务器代替webpack-dev-server（例如，我使用webpack-dev-middleware和webpack-hot-middleware in express）。我不知道这很重要，但我想我会提到它。

我使用lambda forChildren hack得到的结果是，当页面第一次呈现时，当我对其进行后续更改并保存时，我观察到我的webpack包被重新创建（正确 - 这是我的热门行为我正在寻找）。 lambda再次执行以重新加载模块（也是正确的，我认为 - 虽然它是不可能分辨的，因为Angular的内部构件是下水道管道的迷宫）。这应该假设具有重新加载模块的效果（或者更恰当地，挂钩到在浏览器中处理这些请求的webpack HMR运行时）......但是它失败并且注册了重复模块＆＃34;错误。

当我不使用延迟加载时，一切都按预期完成。我的功能模块在其路由被命中时加载，我的功能的子组件都按设计工作，如果我修改我的任何组件，无论是在顶级模块还是任何功能模块或其组件中，webpack都完全符合我的预期并更新HTML（或css，或脚本，或者由于我的更改而进行的热重新加载）。

我已经看过一些声称有效的例子，但它们在某种程度上略有不同，例如：

• 而不是预编译TS文件，他们在webpack中使用TS加载器（为什么你会这样做？）
• 他们正在使用webpack-dev-server（不确定这是否重要？）
• 他们正在进行延迟加载，但不使用webpack
• 他们的例子来自RC-n或beta-N，它们不像电流 angular2
• 它是@angularClass。不要涂阴影，而是用他们的github＆＃34;锅炉 板＆＃34;不是我所说的最小的＆＃39;。
• 他们的例子只是脱离上下文的单行片段（如 我知道，到目前为止，我已经提供了什么。

我想我只是希望有人在某个地方有一个类似我的场景的例子他们可以指出我可以学习并尝试复制。这是我在整个职业生涯中（约12年）处理过的最令人沮丧的技术问题。