Angular - 部署后加载生产 block 文件失败

Question

我的客户整天都打开浏览器，所以在我进行部署后，他们看到应用程序损坏，他们需要重新加载页面来修复它。

由于@angular/cli 生产构建添加了 NO-CACHE 哈希，服务器无法加载 block 文件。

错误:错误:未捕获( promise ):错误:加载 block 11 失败。

我想在部署后重新加载页面。

这些是我的工具:

• 我可以访问我的 NGINX 配置。
• 我可以访问 Jenkins(蓝海)
• 我在项目中实现了 HttpClient 拦截器。

Answer 1

我管理路由的错误，替换它的错误处理程序并在发现加载 block 错误时重新加载。

// Keep the original error handler
const oldHandler = this.router.errorHandler;
// Replace route error handler
this.router.errorHandler =  (err: any) => {
  // Check if there is an error loading the chunk
  if (err.originalStack && err.originalStack.indexOf('Error: Loading chunk') >= 0) {
    // Check if is the first time the error happend
    if (localStorage.getItem('lastChunkError') !== err.originalStack) {
      // Save the last error to avoid an infinite reload loop if the chunk really does not exists after reload
      localStorage.setItem('lastChunkError', err.originalStack);
      location.reload(true);
    } else {
      // The chunk really does not exists after reload
      console.error('We really don\'t find the chunk...');
    }
  }
  // Run original handler
  oldHandler(err);
};

希望对你有帮助