Angular-CLI更新Service Worker时出现Cannot read property 'id' of undefined错误

这个错误的核心原因很明确：ngsw-worker.js里的updateClient方法被传入了undefined的client参数，导致读取client.id时直接抛出异常。结合你提到的测试步骤（注册SW、进入离线状态），我整理了几个针对性的排查和修复方案：

1. 确认Service Worker的注册时机是否合规 #

Angular的Service Worker需要在应用完全稳定后再注册，不然容易出现客户端上下文未初始化的问题。建议你检查app.module.ts里的SW注册代码，使用Angular推荐的延迟注册策略：

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // ...其他模块
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // 应用稳定后30秒再注册，避免过早注册导致的上下文问题
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule { }

2. 规范测试更新的流程 #

很多时候这个错误是因为测试流程不符合SW的工作逻辑：

• 更新必须先在线触发：离线状态下SW无法拉取新版本的ngsw.json和资源，强行触发更新会导致client对象无法正确获取。正确的流程是：先在线检查更新→下载新版本资源→再切换到离线状态验证。
• 使用Angular封装的SwUpdate服务：避免手动操作底层SW API，用官方提供的API更稳定：

  import { Component, OnInit } from '@angular/core';
  import { SwUpdate } from '@angular/service-worker';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    constructor(private swUpdate: SwUpdate) {}
  
    ngOnInit(): void {
      if (this.swUpdate.isEnabled) {
        // 定期检查更新
        this.swUpdate.checkForUpdate().then(hasUpdate => {
          if (hasUpdate) {
            // 激活更新并刷新页面
            this.swUpdate.activateUpdate().then(() => window.location.reload());
          }
        });
      }
    }
  }
  

3. 检查浏览器SW状态并重置环境 #

有时候缓存的旧SW或者异常状态会导致这类问题：

• 打开浏览器开发者工具的Application → Service Workers面板，检查当前SW的状态是否为activated，有没有报错信息；
• 点击面板里的Unregister按钮清除旧的SW注册，然后清除浏览器缓存，刷新页面重新注册SW后再测试。

4. 排查自定义SW或第三方插件的干扰 #

如果你在项目中添加了自定义的Service Worker逻辑，或者安装了和SW相关的浏览器插件（比如广告拦截器、隐私插件），这些都可能干扰Angular官方SW的正常运行。建议暂时移除自定义代码或禁用插件，再测试是否还会出现错误。

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