角度延迟加载不适用于直接网址答案

【问题标题】：Angular lazy loading not working with direct url角度延迟加载不适用于直接网址
【发布时间】：2017-12-16 01:57:53
【问题描述】：

我正在运行 .net Core + webpack 3 + Angular 4。

我的延迟加载在应用内使用时效果很好，就像通过导航栏一样，但是当我尝试直接访问延迟加载的 url 时失败。

fail: Microsoft.AspNetCore.NodeServices[0]
      ERROR { Error: Uncaught (in promise): Error: Cannot find module './components/members/members.module.ngfactory'.
      Error: Cannot find module './components/members/members.module.ngfactory'.
          at /root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:35933:9
          at ZoneDelegate.module.exports.ZoneDelegate.invoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92811:26)
          at Object.onInvoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:14833:33)
          at ZoneDelegate.module.exports.ZoneDelegate.invoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92810:32)
          at Zone.module.exports.Zone.run (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92561:43)
          at /root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:93238:57
          at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92844:31)
          at Object.onInvokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:14824:33)
          at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92843:36)
          at Zone.module.exports.Zone.runTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92611:47)

... 是否有解决此问题的已知方法或解决方法，以便我可以模仿路由器在应用程序内的工作方式并将请求“重定向”到延迟加载的模型

【问题讨论】：

您在配置路由时尝试过 { useHash: true } 吗？
感谢修复！虽然没有它有没有办法让它工作？

标签： angular webpack

【解决方案1】：

使用Hash定位策略：

RouterModule.forRoot([...], { useHash });

为什么会这样？

在包括 IIS 在内的大多数 Web 服务器中，哈希前面的部分被视为服务器上实际页面的路径。但是路由实际上只存在于客户端应用程序中。深层链接会先打到服务器，当然路由不存在，所以出现404错误。使用# location 策略解决了这个问题，因为服务器忽略了 # 之后的部分，因此它从服务器的角度正确解析了页面。 Angular 会完成剩下的工作，将您带到正确的页面。

您需要告诉网络服务器到 SPA 的深层链接是可以的。这是一个看起来不错的指南：https://gingter.org/2017/03/20/deep-link-angular-spa-iis/

【讨论】：