Angular Service Worker更新时出现“无法在初始化前访问词法声明”错误

问题详情 #

• 基于Angular开发的应用，通过ngsw-config.json配置了Service Worker，测试更新机制时出现报错
• 服务器存在新版本时，浏览器控制台抛出can't access lexical declaration 'o' before initialization（偶尔会变为'a'）的错误
• 错误发生在SwUpdate.VERSION_DETECTED事件触发后、SwUpdate.VERSION_READY事件触发前，导致后者无法正常触发
• 错误来源是旧版本的main.js，而非新下载的文件，触发时机在Service Worker下载新main.js和ngsw.json期间或之后
• 重启应用后能正常完成更新，应用处于最新版本时无此错误
• 应用代码已压缩混淆，VSCode调试器无法复现该错误，难以定位具体问题代码

可能原因 #

• 旧版本main.js中存在let/const变量提升相关的代码缺陷，在Service Worker更新流程中，旧代码仍在运行，新资源的下载触发了旧代码中未正确初始化的变量访问
• Angular Service Worker的更新逻辑与旧应用代码存在冲突，导致旧代码的某个模块在未完成初始化时被调用
• 代码压缩混淆后变量名被随机替换，所以错误提示中的变量名不固定，增加了定位难度

解决方案 #

1. 临时规避 #

在监听SwUpdate.VERSION_DETECTED事件后，直接提示用户刷新页面，跳过后续自动更新流程，避免错误触发：

constructor(private swUpdate: SwUpdate) {
  if (swUpdate.isEnabled) {
    swUpdate.versionDetected.subscribe(() => {
      if (confirm('有新版本可用，是否立即更新？')) {
        window.location.reload();
      }
    });
  }
}

2. 定位问题根源 #

• 临时关闭代码压缩：修改angular.json中对应环境的optimization选项为false，重新部署应用后复现错误，此时能看到未混淆的变量名，定位具体代码位置
• 排查旧版本代码中所有let/const的使用场景，重点检查异步逻辑、Service Worker相关回调中是否存在提前访问未初始化变量的情况
• 核对自定义的SwUpdate相关逻辑，确认是否在事件回调中调用了未完全初始化的模块或函数

3. 修复代码缺陷 #

• 针对定位到的变量初始化问题，调整代码执行顺序，确保变量在被访问前完成初始化
• 涉及异步操作的场景，使用async/await或Promise链式调用保证代码执行顺序正确
• 检查当前Angular版本是否存在Service Worker更新相关的已知bug，考虑升级到对应版本的最新补丁版本

4. 优化Service Worker更新配置 #

调整ngsw-config.json的更新策略，比如设置updateMode为immediate，或缩短旧资源的缓存时间：

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

内容的提问来源于stack exchange，提问作者Fanfoue