Angular：模块lazyLoading和丢失的块答案

【问题标题】：Angular: module lazyLoading and missing chunkAngular：模块lazyLoading和丢失的块
【发布时间】：2018-03-06 16:07:11
【问题描述】：

我们正在为路由器模块使用延迟加载。

  {
    path: 'users',
    loadChildren: 'app/users/users.module#UsersModule',
  },

但是当我们更新版本我们的应用程序（上传新的捆绑包到服务器）时，它总是被破坏：旧应用程序（该用户已经下载）试图获取旧的块文件，它不在服务器了。

实例：https://alexshakura.github.io/chunk-error/ （我刚刚重命名了块以突出显示错误）

处理此错误的正确方法是什么？

让我描述一下步骤：

AppVersion1 由用户加载（没有延迟加载的块）
我们更新了应用并将捆绑包上传到服务器（所以目前 AppVersion2 是正确的）
用户（仍然有 AppVersion1）转到加载惰性模块的路由，BUT 它尝试从 AppVersion1 加载没有已经存在了。

【问题讨论】：

什么错误？您没有发布，也不清楚您所说的更新是什么意思。您是说如果您重新编译并上传该块文件丢失了吗？或者清单没有指向最新版本？
抱歉不够清楚。尝试获取不再存在的文件（块）的 http 错误（新文件具有新的哈希后缀）。我稍后会用预览更新问题
您是否真的验证了该块在服务器上传后？然后您是否验证了您的清单与假定的块匹配？根据您到目前为止所描述的内容，这似乎是一个部署问题。
不，客户端过时的应用程序试图通过旧路径加载块
是的，自定义错误处理程序可能是答案，我只是想检查一下，也许有更精确的解决方案：预加载策略，拦截器，路由错误

标签： angular angular-router

【解决方案1】：

您可以尝试使用 ng service worker 为您执行此操作。

Service Worker 将拥有自己的清单，使 Worker 能够跟踪应用版本和缓存的资产。每次用户重新加载页面时，都会提供应用程序的缓存版本。然后，在后台，Service Worker 将获取当前清单，对其进行解析，如果有版本更改，它将在后台缓存新的应用程序版本。下一个用户的重新加载将显示应用程序的新版本。

您可以通过将"serviceWorker": true 放入您的.angular-cli.json 到您的应用部分来启用服务工作者功能。

然后在您的src 目录中创建一个ngsw-config.json 文件。默认值应如下所示：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

最后，将 NGSW 模块初始化放入您的 app.module：

@NgModule({
  // ...
  imports: [
    // ...
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ]
})
export class AppModule {}

运行ng build --prod 将为您提供所有其余的。

你可以找到更多关于服务工作者in the official docs。

【讨论】：

【解决方案2】：

2021 年更新。

我遇到了与 OP 相同的问题，但根据 @Heehaaw 的提示，我通过将其应用为 PWA 解决了这个问题。

但是，我不推荐使用 @Heehaaws 方法来使其成为 Angular PWA。相反，应该遵循 Angulars 官方指南 https://angular.io/guide/service-worker-getting-started

在您的项目中运行此命令，或按照上面的指南进行操作。

ng add @angular/pwa

【讨论】：