APP_INITIALIZER

Central Perks?

B. Chepkorir
SD Tidbits
2 min readSep 29, 2022

--

Photo by Zen Chung

If you are ever on the fence about using the Angular APP_INITIALIZER, err on the side of caution — just use it.

It has some very useful application debugging purposes beyond application set-up.

Exhibit A:

In this golden age of Reactive Programming, it’s not uncommon to find some blurred lines where async meets sync.

For example, when working with NgRx Effects that depend on some synchronous processes.

Fact: Angular application imports are registered before application initialization.

Fact: You can use the APP_INITIALIZER to execute some startup functions or load some crucial application configurations, like user profiles.

NgRx Effects are registered in an Angular Module as an import. This means that if a root-level Effect uses a synchronous function, like getUserID(). It will be registered in the root app module before the application is initialized. userID will still be undefined until user profile data is loaded during app initialization.

👀 See those blurred lines?

While this scenario may not always elicit some frustrating bugs in development. It hopefully points to the ease of figuring out when certain methods are called or when variables are set when you use the perspective of application initialization.

Well, that and a ton of console.logs🤔

It’s also probably a good idea to ensure such async processes depend on other async processes. Or you may need to pay closer attention to execution times…and move some stuff.

--

--

B. Chepkorir
SD Tidbits

Software Development Enthusiast | Writer on Code Like A Girl & FreeCodeCamp -- I "talk" fast