The APP_INITIALIZER is a built-in InjectionToken. It is an instance of injectionToken. It is called when an angular app is initialized. It allows you to provide a function that will be executed to completion during the app initialization stage. This is done before rendering anything. If the provided function returns the promise angular will wait until the promise is solved or completed. Let’s take a close look at where the APP_INITIALIZER is used. Angular will suspend or wait until all functions provided by the APP_INITIALIZER are executed. If any functions return a promise angular waits till it is resolved. This flow of steps allows us to jump into the initialization process and run some custom logic. For our APP_INITIALIZER example, create a new Angular Project.

In the src/app directory create app-init.services.ts file.

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

@Injectable()

export class AppInitService {

    constructor() {

    }

    Init() {

        return new Promise<void>((resolve, reject) => {

            console.log("AppInitService.init() called");

            ////do your initialisation stuff here  

            setTimeout(() => {

                console.log('AppInitService Finished');

                resolve();

            }, 6000);

        });

    }

}

In the file we have a method called Init which returns a promise. In the method we have set a timer which will wait until 6000th millisecond and then calls the resolve.

In app.module.ts add the below lines of code.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, APP_INITIALIZER } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AboutUsComponent } from './about-us.component';

import { HomeComponent } from './home.component';

import { ContactUsComponent } from './contact-us.component';

import { AppInitService } from './app-init.service';

export function initializeApp1(appInitService: AppInitService) {

  return (): Promise<any> => { 

    return appInitService.Init();

  }

}

@NgModule({

  declarations: [

    AppComponent, AboutUsComponent,HomeComponent,ContactUsComponent

  ],

  imports: [

    HttpClientModule,

    BrowserModule,

    AppRoutingModule,

  ],

  providers: [ 

    AppInitService,

    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true}

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

In the file imported APP_INITIALIZATION from @angular/core. Then execute the appInitService(). The function given below invokes the appInitService.Init() and returns a promise. In the last lines we use the APP_INITIALIZER token to provide the initializeApp1. When you run the app in the chrome developer console the messages from the service appear first before the “Angular running in development mode” message. If a reject is returned from the service angular app will not start. To create a Multi Provider token use the multi:true. This is used to create more than one function/service and invoke it during initialization.