Angular 延迟加载不适用于直接网址

标签 angular webpack

我正在运行 .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)

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

最佳答案

使用哈希定位策略:

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

为什么会这样?

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

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

关于 Angular 延迟加载不适用于直接网址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47841881/

相关文章:

angular - 在Angular2中从父模块继承导入到子模块

angular - Ionic4:在Web应用程序中播放音频文件时出现问题

使用真假值的 Angular 单选按钮绑定(bind)

vue.js - Nuxt vendor.app 太大,font awesome 太大

javascript - ES6 语法错误 const

css - Angular Material Mat-基于最长选项宽度选择宽度

angular - 错误的样式包路径

vue.js - 如何设置 vue-template-compiler 选项以及在哪里?

angularjs - 支持 bower 的 Webpack

javascript - Webpack 代码拆分 : ChunkLoadError - Loading chunk X failed, 但 block 存在