如何在Angular执行APP_INITIALIZER时显示等待指示器？

这个问题我之前也碰到过，确实挺头疼的——APP_INITIALIZER会阻塞Angular的整个启动流程，直到它的异步操作（比如你调用Web API获取启动数据）完成。这就导致你之前试的两种loading方案都没效果：要么<app-root>里的内容被Angular的初始化流程覆盖但一直没渲染，要么外面的div可能因为样式或者Angular启动后的操作被隐藏了。

下面是两个亲测有效的解决思路：

方法一：独立的全局Loading容器（最直接） #

把loading元素放在<app-root>外面，让它不受Angular初始化流程的影响，直到APP_INITIALIZER完成后再手动隐藏它。

1. 修改index.html，添加独立loading容器
   在<app-root>标签外新增一个全屏的loading容器：

<div id="app-loading">
  <div>正在加载中，请稍候...</div>
</div>
<app-root></app-root>

2. 添加全局样式确保loading全屏显示
   在index.html的<style>标签或者全局样式文件（比如styles.css）里添加样式，让loading占满整个屏幕，优先级拉满：

#app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  z-index: 9999; /* 确保在所有元素之上 */
  font-size: 18px;
}

3. APP_INITIALIZER完成后隐藏loading
   有两种方式可以触发隐藏：

• 直接在APP_INITIALIZER的工厂函数里处理：

import { APP_INITIALIZER } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export function initializeApp(http: HttpClient) {
  return () => http.get('/api/initial-data').toPromise()
    .then(() => {
      // 数据加载完成后隐藏loading
      const loadingEl = document.getElementById('app-loading');
      if (loadingEl) {
        loadingEl.style.display = 'none';
      }
    })
    .catch(err => {
      // 处理加载失败的情况，比如显示错误信息
      const loadingEl = document.getElementById('app-loading');
      if (loadingEl) {
        loadingEl.innerHTML = '<div>加载失败，请刷新重试</div>';
      }
    });
}

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

• 或者在AppComponent的ngOnInit里处理（因为APP_INITIALIZER完成后，AppComponent才会初始化）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const loadingEl = document.getElementById('app-loading');
    if (loadingEl) {
      loadingEl.style.display = 'none';
    }
  }
}

方法二：利用BehaviorSubject控制loading状态（更灵活） #

如果你的loading状态需要在多个组件里共享或者有更复杂的逻辑，可以用RxJS的BehaviorSubject来管理：

1. 创建一个LoadingService

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(true);
  loading$ = this.loadingSubject.asObservable();

  setLoading(status: boolean): void {
    this.loadingSubject.next(status);
  }
}

2. 在APP_INITIALIZER里更新loading状态

export function initializeApp(http: HttpClient, loadingService: LoadingService) {
  return () => http.get('/api/initial-data').toPromise()
    .then(() => loadingService.setLoading(false))
    .catch(err => {
      loadingService.setLoading(false);
      // 处理错误
    });
}

// 在模块的providers里添加deps: [HttpClient, LoadingService]

3. 结合静态loading使用
   这种方式因为APP_INITIALIZER会阻塞Angular初始化，所以建议先通过方法一的静态loading覆盖初始化阶段的空白，初始化完成后再用这个服务控制后续的动态loading状态。

总结一下，方法一最直接有效，适合大部分场景；方法二适合有复杂状态管理需求的情况。

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