Question

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

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

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

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

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

让我描述一下步骤：

AppVersion1 由用户加载（没有延迟加载的块）
我们更新了应用并将上传的捆绑包更新到服务器（因此目前 AppVersion2 是正确的）
用户（仍然 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将为您提供所有其余功能。

您可以找到有关服务工作者in the official docs的更多信息。

Angular：模块lazyLoading和缺少chunk

1 个答案: