Web硬刷新时ngOnInit在app.component.ts异步函数完成前执行的问题

问题根源 #

1. 异步流程控制错误：你的initialize()方法混用了await和.then()，导致外层的await仅等待checkConnectionConsistency()完成，却没有等待.then()内部的异步操作（比如数据源初始化、迁移执行），使得initialize()提前结束，Angular误以为初始化完成，进而触发组件的ngOnInit。
2. 页面刷新时的初始化时序问题：页面刷新后，Angular组件的初始化流程可能快于数据库异步初始化，导致ngOnInit在数据库就绪前就开始获取数据。

步骤一：重构initialize()方法，统一异步控制 #

去掉.then()，全程使用await确保所有异步操作被正确等待，避免流程提前结束：

async initialize() {
  try {
    // 等待连接一致性检查完成
    await this.sqliteService.checkConnectionConsistency();
    console.log(templateAppDataSource.isInitialized);

    if (!templateAppDataSource.isInitialized) {
      // 初始化数据源
      await templateAppDataSource.initialize();
      const database = String(templateAppDataSource.options.database);
      
      console.log(`*** dataSource has been initialized ***`);
      // 运行数据库迁移
      await templateAppDataSource.runMigrations();
      console.log(`*** dataSource runMigration has been run succesfully ***`);
      console.log(`*** datasource and database has been initialized ***`);

      if (this.sqliteService.getPlatform() === 'web') {
        // 将内存中的数据库保存到存储
        await this.sqliteService.getSqliteConnection().saveToStore(database);
        console.log(`*** inORMService saveToStore ***`);
      }

      console.log(`DataSource: ${database} initialized`);
    } else {
      console.log("Connection Already Established");
    }
    // 无论是否重新初始化，都标记初始化完成
    this.isOrmService = true;
  } catch (err) {
    console.log(`Error: ${err}`);
    // 初始化失败时标记状态，避免组件无限等待
    this.isOrmService = false;
  }
}

步骤二：确保组件等待初始化完成再执行数据操作 #

针对页面刷新时的时序问题，推荐两种方案：

方案1：使用APP_INITIALIZER在Angular启动前完成初始化 #

配置Angular的APP_INITIALIZER，让应用在启动任何组件之前，强制等待数据库初始化完成：

在app.module.ts中添加以下配置：

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

// 初始化工厂函数，返回一个Promise等待ORM初始化完成
export function initializeOrmFactory(ormService: YourOrmService) {
  return () => ormService.initialize();
}

@NgModule({
  // ...其他模块配置（ declarations、imports等）
  providers: [
    YourOrmService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeOrmFactory,
      deps: [YourOrmService],
      multi: true
    }
  ]
})
export class AppModule { }

这种方式最彻底，确保整个应用在数据库就绪后才开始加载组件。

方案2：组件内主动等待初始化完成 #

如果不想修改全局启动流程，可以在需要获取数据的组件中，先等待ORM初始化完成再执行数据操作：

第一步：在ORM服务中暴露初始化Promise

export class YourOrmService {
  private initPromise: Promise<void>;
  isOrmService = false;

  constructor(private sqliteService: SqliteService) {
    // 在构造函数中初始化Promise，确保只执行一次
    this.initPromise = this.initialize();
  }

  // ...重构后的initialize方法

  // 供组件调用，等待初始化完成
  waitForInit(): Promise<void> {
    return this.initPromise;
  }
}

第二步：组件中等待后再加载数据

import { YourOrmService } from './path-to-your-orm-service';

@Component({
  // ...组件配置
})
export class TargetComponent implements OnInit {
  constructor(private ormService: YourOrmService) {}

  async ngOnInit() {
    // 等待ORM初始化完成
    await this.ormService.waitForInit();
    // 现在可以安全执行数据获取逻辑
    this.loadData();
  }

  private async loadData() {
    // 你的数据查询/获取代码
  }
}

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