如何在Angular5的APP_INITIALIZER中处理并告知用户不可恢复异常？

我明白你的需求——APP_INITIALIZER加载配置是应用启动的前提，加载失败的话用户只能看到白屏，体验太差。下面给你一套可行的实现方案：

第一步：提前在index.html中准备错误提示容器 #

因为配置加载失败时，Angular还没完成初始化，组件根本没机会渲染，所以我们得在最基础的index.html里放一个默认隐藏的提示框：

<!-- index.html 的body部分添加 -->
<div id="config-fail-alert" style="display: none; position: fixed; top: 0; left: 0; right: 0; background-color: #f8d7da; color: #721c24; padding: 1.5rem; text-align: center; z-index: 9999;">
  <h3>应用启动失败</h3>
  <p>无法加载必要的配置文件，请检查网络连接或联系系统管理员。</p>
</div>

第二步：改造AppConfig的load方法处理错误 #

在你的AppConfig类里，当HTTP请求配置失败时，直接操作DOM显示提示框，同时记得reject Promise让Angular停止初始化：

@Injectable()
export class AppConfig {
  private config: Object = null;

  constructor(private http: HttpClient) {}

  public getConfig(key: any) {
    return this.config[key];
  }

  public load() {
    return new Promise((resolve, reject) => {
      this.http.get('/path/to/your/config') // 替换成你的实际配置接口地址
        .subscribe({
          next: (resp) => {
            this.config = resp;
            resolve(true);
          },
          error: (err) => {
            // 显示错误提示
            const alertElement = document.getElementById('config-fail-alert');
            if (alertElement) {
              alertElement.style.display = 'block';
            }
            // 打印错误日志方便排查问题
            console.error('配置加载失败详情:', err);
            // 必须reject，告诉Angular初始化失败
            reject(err);
          }
        });
    });
  }
}

第三步：确认providers配置不变 #

你现有的providers配置不需要改动，保持原来的样子即可：

providers: [ 
  AppConfig, 
  { 
    provide: APP_INITIALIZER, 
    useFactory: (config: AppConfig) => () => config.load(), 
    deps: [AppConfig], 
    multi: true 
  }, 
  { provide: LocationStrategy, useClass: HashLocationStrategy}, 
  { provide: ErrorHandler, useClass: GlobalErrorHandler }
]

方案说明 #

• 配置加载阶段Angular还没完成组件树构建，没法用组件模板展示提示，直接操作原生DOM是最可靠的方式
• 必须reject Promise，否则Angular会忽略错误继续初始化，导致后续更多不可预料的报错
• 提前在index.html中放置提示元素，确保加载失败时能立刻将反馈展示给用户

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