Angular v14基于后端环境动态控制Service Worker注册问题

你遇到的两个问题本质原因很明确：

1. NgModule装饰器的配置执行早于Angular依赖注入容器初始化，因此无法直接在装饰器属性中注入运行时加载的配置值
2. 手动从main.ts中调用navigator.serviceWorker.register注册时，如果移除了ServiceWorkerModule导入，Angular不会提供SwUpdate依赖，因此会报NullInjectorError；如果保留导入但设enabled:false再手动注册，Angular内部的SwUpdate无法绑定到你手动注册的Service Worker实例，后续版本更新检测逻辑会完全失效，存在功能隐患。

不需要拆分注册逻辑到main.ts，也不需要手动调用原生Service Worker注册API，完全基于Angular内置能力实现即可：

1. 保留ServiceWorkerModule在AppModule的imports数组中，确保SwUpdate等服务依赖正常提供
2. 利用Angular v14支持的inject()方法，在registrationStrategy工厂函数中直接读取运行时注入的APP_CONFIG，动态判断是否需要注册Service Worker

完整代码示例：

// app.module.ts
import { inject, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';
import { APP_CONFIG, IAppConfig } from './app-config.token'; // 你项目中定义的APP_CONFIG注入令牌

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: true,
      // 自定义注册策略，支持注入运行时配置
      registrationStrategy: () => {
        const appConfig = inject(APP_CONFIG) as IAppConfig;
        // 非生产环境或浏览器不支持SW时，不执行注册
        if (!appConfig.environment.isProduction || !('serviceWorker' in navigator)) {
          return Promise.resolve(false);
        }
        // 满足条件时立即注册
        return Promise.resolve('registerImmediately');
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

• 所有Service Worker相关配置统一收敛在AppModule中，没有分散在多处的逻辑，不存在维护混淆问题
• 始终导入ServiceWorkerModule，因此SwUpdate服务会正常提供，不会出现依赖注入错误
• 非生产环境下不会注册Service Worker，此时SwUpdate.isEnabled为false，你的UpdateService中已经做了if (swUpdate.isEnabled)判断，不会执行后续版本订阅逻辑，无报错风险
• 生产环境下完全走Angular内置的Service Worker注册流程，SwUpdate可以正常和Worker实例通信，版本检测、更新激活逻辑和官方原生写法行为完全一致，没有功能隐患
• 不需要修改main.ts中已有的运行时配置拉取逻辑，只要确保配置在调用platformBrowserDynamic(providers)前已经加载完成并加入providers数组即可，适配你现有的构建一次多环境部署的方案。

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