APP_INITIALIZER

Токен DI, который можно использовать для предоставления одной или нескольких функций инициализации.

Предоставленные функции внедряются при запуске приложения и выполняются во время инициализации приложения. Если одна из этих функций возвращает Promise или Observable, инициализация не завершится, пока Promise не будет разрешён или Observable не будет завершён.

Например, можно создать фабричную функцию, которая загружает данные о языке или внешнюю конфигурацию, и предоставить эту функцию токену APP_INITIALIZER. Функция выполняется в процессе запуска приложения, и необходимые данные доступны при запуске.

Обратите внимание, что предоставленная функция инициализации выполняется в контексте внедрения.

В следующем примере показано, как настроить мультипровайдер с помощью токена APP_INITIALIZER и функции, возвращающей promise.

Пример приложения на основе NgModule

 function initializeApp(): Promise<any> {
   const http = inject(HttpClient);
   return firstValueFrom(
     http
       .get("https://someUrl.com/api/user")
       .pipe(tap(user => { ... }))
   );
 }

 @NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{
    provide: APP_INITIALIZER,
    useValue: initializeApp,
    multi: true,
   }]
  })
 export class AppModule {}

Пример автономного приложения

function initializeApp() {
  const http = inject(HttpClient);
  return firstValueFrom(
    http
      .get("https://someUrl.com/api/user")
      .pipe(tap(user => { ... }))
  );
}

bootstrapApplication(App, {
  providers: [
    provideHttpClient(),
    {
      provide: APP_INITIALIZER,
      useValue: initializeApp,
      multi: true,
    },
  ],
});

Также можно настроить мультипровайдер с помощью токена APP_INITIALIZER и функции, возвращающей observable. См. пример ниже. Примечание: HttpClient в этом примере используется для демонстрации того, как фабричная функция может взаимодействовать с другими провайдерами, доступными через DI.

Пример приложения на основе NgModule

function initializeApp() {
  const http = inject(HttpClient);
  return firstValueFrom(
    http
      .get("https://someUrl.com/api/user")
      .pipe(tap(user => { ... }))
  );
}

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{
    provide: APP_INITIALIZER,
    useValue: initializeApp,
    multi: true,
  }]
})
export class AppModule {}

Пример автономного приложения

function initializeApp() {
  const http = inject(HttpClient);
  return firstValueFrom(
    http
      .get("https://someUrl.com/api/user")
      .pipe(tap(user => { ... }))
  );
}

bootstrapApplication(App, {
  providers: [
    provideHttpClient(),
    {
      provide: APP_INITIALIZER,
      useValue: initializeApp,
      multi: true,
    },
  ],
});