Angular独立范式下，使用bootstrapApplication和provideAppInitializer时如何显示自定义<my-spinner>组件

我之前在做Angular独立应用的时候也碰到过这个问题——想用自己写的<my-spinner>组件代替index.html里那种原生的加载动画，可provideAppInitializer是在Angular完全启动前执行的，这时候直接用自定义组件根本不生效。后来摸索出两种比较实用的方案，给你参考下：

方案一：先启动加载组件，完成初始化再切换主应用 #

这种方式相当于先给用户看一个极简的加载过渡页，等所有初始化逻辑跑完，再替换成真正的主应用。

1. 先把你的<my-spinner>组件做好，确保它是独立组件（standalone: true），样式和结构都调试好：

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

@Component({
  selector: 'my-spinner',
  template: `
    <div class="spinner-wrapper">
      <div class="spinner-circle"></div>
      <p>正在加载应用资源...</p>
    </div>
  `,
  styles: [`
    .spinner-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      gap: 1rem;
    }
    .spinner-circle {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `],
  standalone: true
})
export class MySpinnerComponent {}

2. 再创建一个临时的加载根组件，里面只放我们的加载组件：

import { Component } from '@angular/core';
import { MySpinnerComponent } from './my-spinner.component';

@Component({
  selector: 'app-loader',
  template: `<my-spinner></my-spinner>`,
  imports: [MySpinnerComponent],
  standalone: true
})
export class AppLoaderComponent {}

3. 最后在main.ts里手动控制启动流程：先加载临时组件，执行初始化逻辑，完成后再切换到主应用：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppLoaderComponent } from './app/app-loader.component';
import { AppComponent } from './app/app.component';

// 把原来在provideAppInitializer里的逻辑抽成独立函数
async function runAppInitialization() {
  // 这里写你的初始化逻辑：比如加载配置文件、请求用户信息等
  await fetch('/app-config.json');
  // 模拟延迟，方便看效果
  await new Promise(resolve => setTimeout(resolve, 2000));
}

// 先启动加载组件
bootstrapApplication(AppLoaderComponent).then(async (appRef) => {
  try {
    // 执行初始化
    await runAppInitialization();
    // 销毁加载组件实例
    appRef.destroy();
    // 启动真正的主应用
    await bootstrapApplication(AppComponent, {
      providers: [
        // 这里放你主应用的其他提供者，原来的provideAppInitializer可以去掉了
      ]
    });
  } catch (err) {
    console.error('初始化失败:', err);
    // 这里可以加错误处理逻辑，比如显示错误提示
  }
});

方案二：主应用内条件渲染，结合APP_INITIALIZER #

如果你的初始化逻辑需要依赖Angular的服务（比如HttpClient），可以用这种方式：主应用先启动，但一开始只显示加载组件，等初始化完成后再显示主内容。

1. 先创建一个初始化服务，用来跟踪初始化状态：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AppInitService {
  isAppInitialized = false;
  private initPromise!: Promise<void>;

  constructor(private http: HttpClient) {
    this.initPromise = this.performInitialization();
  }

  private async performInitialization() {
    // 这里用HttpClient请求配置，依赖Angular服务的场景就很适合
    const config = await firstValueFrom(this.http.get('/app-config.json'));
    // 可以把配置存到服务里，供其他组件使用
    // 模拟延迟
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.isAppInitialized = true;
  }

  // 给APP_INITIALIZER用的初始化方法
  getInitializationPromise() {
    return this.initPromise;
  }
}

2. 在main.ts里配置APP_INITIALIZER，让Angular在启动前等待初始化完成：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { AppInitService } from './app/app-init.service';
import { APP_INITIALIZER } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(), // 因为用到了HttpClient，所以要加这个提供者
    {
      provide: APP_INITIALIZER,
      useFactory: (initService: AppInitService) => () => initService.getInitializationPromise(),
      deps: [AppInitService],
      multi: true
    }
  ]
});

3. 最后在主组件里根据初始化状态条件渲染：

import { Component } from '@angular/core';
import { MySpinnerComponent } from './my-spinner.component';
import { AppInitService } from './app-init.service';

@Component({
  selector: 'app-root',
  template: `
    @if (!initService.isAppInitialized) {
      <my-spinner></my-spinner>
    } @else {
      <div class="app-content">
        <h1>欢迎使用我的应用！</h1>
        <!-- 这里放主应用的内容 -->
      </div>
    }
  `,
  imports: [MySpinnerComponent],
  standalone: true
})
export class AppComponent {
  constructor(public initService: AppInitService) {}
}

两种方案各有侧重：方案一适合初始化逻辑不依赖Angular上下文的场景，启动更轻量；方案二更适合需要用到Angular服务的初始化场景，逻辑整合度更高。你可以根据自己的项目需求选。

内容来源于stack exchange