Angular 17升级后SwUpdate报错：Property 'available'不存在

问题原因 #

Angular 17 对 @angular/service-worker 的 SwUpdate API 做了破坏性变更，旧的 available Observable 被移除，取而代之的是 versionUpdates Observable，用来统一处理各类版本更新事件。

修复代码 #

首先确保导入必要的类型和RxJS操作符：

import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { filter } from 'rxjs/operators';

然后替换原有的订阅逻辑：

ngOnInit(): void {
  // ...其他初始化代码
  if (this.swUpdate.isEnabled) {
    this.swUpdate.versionUpdates
      .pipe(
        // 过滤出版本已准备好的事件（对应原available触发的场景）
        filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')
      )
      .subscribe(() => {
        window.location.reload();
      });
  }
}

如果不需要获取版本信息，也可以简化成更简洁的写法：

this.swUpdate.versionUpdates
  .pipe(filter(evt => evt.type === 'VERSION_READY'))
  .subscribe(() => window.location.reload());

补充说明 #

versionUpdates 还会触发其他类型的事件（比如 NO_NEW_VERSION_DETECTED），通过过滤 VERSION_READY 事件就能精准对应到你之前用 available 的场景，实现相同的更新刷新逻辑。

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