Angular:模块延迟加载和缺少 block

Question

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

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

但是当我们更新版本我们的应用程序(上传新包到服务器)时，它总是坏掉:旧应用程序(该用户已经下载)试图获取不在服务器了。

实例:https://alexshakura.github.io/chunk-error/ (我刚刚重命名了 block 以突出显示错误)

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

---

让我描述一下步骤:

1. AppVersion1 由用户加载(没有延迟加载的 block )
2. 我们更新了应用程序并将 bundle 上传到服务器(因此当前 AppVersion2 是正确的)
3. 用户(仍然有 AppVersion1)转到加载惰性模块的路由，但是它尝试从 AppVersion1 加载 block ，但没有存在了。

Answer 1

您可以尝试使用 ng service worker 为您做这件事。

服务工作人员将拥有自己的 list ，使工作人员能够跟踪应用程序版本和缓存的 Assets 。每次用户重新加载页面时，都会提供应用程序的缓存版本。然后，在后台，service worker 将获取当前 list ，解析它，如果有版本更改，它将在后台缓存新的应用程序版本。下一次用户重新加载将显示应用的新版本。

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

然后在您的 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 .