Angular: App Startup (V19 and later)

During application startup, you may have activities that need to occur before the first page opens. One example is a splash screen. 

 NOTE: This page applies to Angular v19 and later, as APP_INITIALIZER was deprecated in V19. See this page for how to do the same, before v19: https://wiki.galaxydump.com/link/130 

 To make one occur, do these things: 

 

 Open the app.config.ts of your app. 

 Add an import for provideAppInitializer: 

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

   

 

 Create an initializeApp method in the file (or, somewhere else that you can import). It must return a Promise<boolean>. So, make sure its signature looks like this: 

 export function initializeApp(): Promise<boolean> 

 NOTE: The old way of doing this, used an initializer method that returned a () => Promise<boolean> So, be sure to update the return when migrating older code. 

 

 Add a provider entry for the initializer: It looks like this: 

 export const appConfig: ApplicationConfig = {

 providers:

 [

 provideAppInitializer(initializeApp)

 ]

}; 

 

 If your initializeApp function needs to run some async logic, structure it like this: 

 export function initializeApp(): Promise<boolean>

{

 const _appsvcconfig = inject(AppconfigService);

 console.log("AppModule-" + "_" + ":initializeApp - triggered.");

 // To ensure that dependencies are stood up and ready, we must wrap our logic in a lambda, instead of naked execution...

 return (async (): Promise<boolean> =>

 {

 console.log("AppModule-" + "_" + ":initializeApp - inside startup promise...");

 ... DO SOME THINGS...

 

 // Report success or failure...

 return true;

 })(); // Notice the () at the end - this immediately invokes the async lambda

}