Angular:模块lazyLoading和缺少chunk

Question

我们正在使用Lazy Loading for Router Modules.

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

但是当我们更新我们的应用程序版本(将新捆绑包上传到服务器)时,它总是被破坏:旧应用程序(用户已经下载)尝试获取不再在服务器上的旧块文件.

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

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

---

我来介绍一下这些步骤:

1. AppVersion1由用户加载(没有延迟加载的块)
2. 我们将应用程序和上传的软件包更新到了​​服务器(所以目前AppVersion2是正确的)
3. 用户(仍然有AppVersion1)进入加载延迟模块的路由,但它尝试从AppVersion1加载不再存在的块.

Answer 1

您可以尝试使用ng服务工作人员为您执行此操作.

服务工作者将拥有自己的清单,使工作人员能够跟踪应用程序版本和缓存资产.每次用户重新加载页面时,都会提供应用程序的缓存版本.然后,在后台,服务工作者将获取当前清单,解析它,如果有版本更改,它将在后台缓存新的应用程序版本.下一个用户的重新加载将显示该应用程序的新版本.

您可以通过"serviceWorker": true添加.angular-cli.json到应用程序部分来启用服务工作者功能.

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

{
  "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将为您提供所有其余的.

您可以在官方文档中找到有关服务工作者的更多信息.