# Angular: App Startup (pre-V19)

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

<p class="callout warning">NOTE: This page applies to Angular v18 and earlier, as APP\_INITIALIZER is deprecated in V19.  
See this page for how to do the same in v19: [Angular: App Startup (V19 and later)](https://wiki.galaxydump.com/link/132)</p>

To make one occur, do these things:

1. Add an import of `APP_INITIALIZER` to your app.module.ts, like this:
    
    ```typescript
    // This import added to hook into the initialization so we can delay opening pages for the splash container to display.
    import { APP_INITIALIZER } from '@angular/core';
    ```
2. The App Initalizer can act as a DI provider that will call any method you like.  
    We will add a startup method call to the providers block, like this:  
    ```typescript
      providers: 
      [
        {
          provide: APP_INITIALIZER, 
          useFactory: initializeApp,
          multi: true,
          deps: [AppconfigService]
        },
    ```
    
    The above provider calls a method, named, `initializeApp`. This method must return a Promise&lt;boolean&gt;.  
      
    <p class="callout info">NOTE: The above call has a DI dependency. So, we add a deps list that includes it.</p>
3. Still inside app.module.ts, define the `initializeApp` method, like this:  
      
    ```typescript
    // This method is called when the app first starts up.
    // It will load any initial config, and setup anything required.
    export function initializeApp(_appsvcconfig: AppconfigService): () => Promise<boolean>
    {
      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...
      let lambda = async (): Promise<boolean> => {
    
        console.log("AppModule-" + "_" + ":initializeApp - inside startup promise...");
    
        if(_appsvcconfig == null)
        {
          console.error("AppModule-" + "_" + ":initializeApp - appconfig service instance is null.");
    
          // Cannot startup app.
          return false;
        }
    
        console.log("AppModule-" + "_" + ":initializeApp - Sleeping...");
    
        await Runtime_Sleep(1000);
    
        console.log("AppModule-" + "_" + ":initializeApp - Sleep done. Calling LoadConfig...");
    
        let val = await _appsvcconfig.LoadConfig();
    
        console.log("AppModule-" + "_" + ":initializeApp - LoadConfig returned.");
    
        // Register any singletons...
    
        // Stand up any local config...
        
        // Report success...
        return true;
      };
    
      return lambda;
    }
    ```
    
    The above method returns a Promise (to the provider factory) that is actually a lambda method with an async body.
4. Inside the initializer’s lambda, we call a sleep method to slow down presentation, so a splash page can linger.
5. We can add any startup activities to this method as needed for initialization.