Tip #13[StaticProvider]

One of the possibilities to hook into Angular application’s bootstraping process is to make use of the APP_INITIALIZER token. Although it delays the root component rendering, it does not prevent modules and services from immediate creation. In addition, if you fetch some data as a part of the process, e.g. application config file, you cannot easily provide it under a certain token. Fortunately, you can pass an array of StaticProvider objects to the platformBrowserDynamic function in the main.ts file which is responsible for bootstraping your application:

You can easily access the application config file with the aid of the Dependency Injection mechanism:

In addition, not only the root component rendering, but also modules and services construction is delayed until the config file is fetched:

Alternatively, you can store the fetched data in the sessionStorage or a plain shared JavaScript object and still take advantage of suspending the bootstraping process until the required data is present.

Live example:

If you like the tip, please give me some applause 👏