如何借助APP_INITIALIZER在初始化失败时终止Angular应用启动

我在app.module.ts中定义了以下代码，强制Core模块中的Properties服务在应用启动时初始化：

/**
 * Initializer factory function to population the properties in $props on app startup
 * 
 * (This might not be acceptable in cases where the user is not logged in, revisit later)
 * 
 * @param $props 
 * @returns 
 */
export function initPropertiesService($props : PropertiesService) {
  return () => $props.init();
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    // logging third-party
    HttpClientModule,
    // Third party
    // Custom Modules Go Here
    AppRoutingModule,
    CoreModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initPropertiesService,
      deps: [PropertiesService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

init()方法的代码如下：

// initialize service
init() : void {
  // TODO: get rid of deprecation warning.
  this.$http.get<Property[]>(`${this.urlPrefix}/list`)
    .subscribe((response : Property[]) => {
      this.properties = new Map<string, Property> (
        response.map(prop => {
          return [prop.key, prop]
        })
      );
    },
    (error) => {
    },
    () => {
      this.initialized = true;
    });
}

请问如何在该初始化操作失败时强制终止Angular应用的启动？

要实现初始化失败时终止应用启动，需要修改两个核心部分：让init()方法返回可被Angular等待的异步对象（Promise或Observable），并在失败时抛出异常。

1. 修改PropertiesService的init()方法 #

原来的init()返回void，Angular不会等待HTTP请求完成就继续启动应用。我们需要让它返回Promise或Observable，并在错误处理中抛出异常：

方案一：返回Promise

// initialize service
init(): Promise<void> {
  return this.$http.get<Property[]>(`${this.urlPrefix}/list`)
    .pipe(
      tap((response: Property[]) => {
        this.properties = new Map<string, Property>(
          response.map(prop => [prop.key, prop])
        );
        this.initialized = true;
      }),
      catchError((error) => {
        console.error('Properties服务初始化失败:', error);
        // 抛出异常，让Promise变为拒绝状态
        throw new Error('应用启动失败：无法加载配置属性');
      })
    )
    .toPromise();
}

方案二：返回Observable（推荐，无需转Promise）

// initialize service
init(): Observable<void> {
  return this.$http.get<Property[]>(`${this.urlPrefix}/list`)
    .pipe(
      tap((response: Property[]) => {
        this.properties = new Map<string, Property>(
          response.map(prop => [prop.key, prop])
        );
        this.initialized = true;
      }),
      catchError((error) => {
        console.error('Properties服务初始化失败:', error);
        // 抛出异常，终止Observable流
        throw new Error('应用启动失败：无法加载配置属性');
      }),
      map(() => void 0) // 将流转换为void类型，匹配返回值
    );
}

2. 保持初始化工厂函数不变 #

工厂函数无需修改，因为它返回的函数现在会返回Promise/Observable，Angular会自动等待该异步操作完成：

export function initPropertiesService($props: PropertiesService) {
  return () => $props.init();
}

原理说明 #

• Angular的APP_INITIALIZER提供者会等待所有返回Promise/Observable的初始化函数完成后，才继续启动应用。
• 如果初始化函数返回的Promise被拒绝，或者Observable抛出错误，Angular会立即终止应用启动流程，不会渲染任何组件。

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