Angular中APP_INITIALIZER重置NgRx Store未完成问题求助

你的核心问题在于：NgRx的store.dispatch()是异步操作，返回的是Observable，但你当前的代码只是触发了dispatch，却没有等待它执行完成就通过setTimeout强制resolve了初始化器。这导致应用在Store重置完成前就已经完成初始化，旧数据依然会被读取。

修改初始化服务，确保等待Store重置动作完全执行完毕后再完成初始化流程。具体步骤如下：

1. 导入RxJS的firstValueFrom（替代已废弃的toPromise）来将Observable转换为Promise，实现异步等待。
2. 移除不可靠的setTimeout，改用await等待dispatch动作完成。
3. 正确抛出错误，让Angular感知初始化失败（可选，根据业务需求调整）。

修改后的初始化服务代码 #

import { Injectable } from '@angular/core';
import { Store } from '@ngxs/store';
import { environment } from 'src/environments/environment';
import { ResetApplicationStateModel } from 'src/app/modules/state/application-state.actions';
import { firstValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AppStateInitializerService {

  isDevelopment = !environment.production;

  constructor(private store: Store) {}

  async initialize(): Promise<void> {
    const loggingPrefix = 'app-state-initialiser.service::initializeApp - ';

    if (this.isDevelopment) {
      console.log(loggingPrefix + 'start of method');
    }

    try {  
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'before ResetApplicationStateModel');
      }
      
      // 等待重置动作完全执行（包括reducer处理、关联effects完成）
      await firstValueFrom(this.store.dispatch(new ResetApplicationStateModel()));
      
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'after ResetApplicationStateModel');
      }
      
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'end of method');
      } 
    } catch (error) {
      console.error(loggingPrefix + 'Action failed:', error);
      throw error; // 抛出错误让Angular知晓初始化失败
    }
  }
}

确认AppModule的初始化器配置 #

确保你在AppModule的providers中正确注册了APP_INITIALIZER（如果之前没配置完整，补充如下）：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppStateInitializerService } from './path-to-your-service';

export function initializerStateService(myInitializerService: AppStateInitializerService) {
  return (): Promise<any> => { 
    return myInitializerService.initialize();
  }
}

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializerStateService,
      deps: [AppStateInitializerService],
      multi: true
    }
  ]
})
export class AppModule { }

确保ResetApplicationStateModel对应的reducer逻辑正确，已经覆盖所有需要重置的Store切片，避免遗漏导致部分旧数据残留。

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