DEV Community: Harshal Limaye

How to use APP_INITIALIZER token in Angular

Harshal Limaye — Wed, 28 Dec 2022 03:28:12 +0000

APP_INITIALIZER is a powerful feature in Angular that allows developers to perform tasks before the application starts. It is essentially a way to run code during the bootstrapping process of an Angular app. One common use case for APP_INITIALIZER is to load configuration data from a server or a local file. This data is often required for the application to function properly, and it is important to have it available as soon as possible.

To use APP_INITIALIZER, you need to import the APP_INITIALIZER token from the @angular/core module and use it to provide a factory function. This factory function should return a Promise that resolves when the initialization is complete.

Let's understand this in detail using an example:

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

export function loadConfig(http: HttpClient) {
  return () => http.get('/config').toPromise();
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [HttpClient],
      multi: true
    }
  ]
})
export class AppModule {}

In this example, the loadConfig function uses the HttpClient to make a request to a server to retrieve the configuration data. The function returns a Promise that resolves when the data has been retrieved.

It is important to note that the APP_INITIALIZER factory function should be marked as multi: true, as this allows multiple initializers to be run. If you do not mark the factory function as multi: true, only the last initializer registered will be run.

And that's it! I hope you found this post useful. Incase you have any questions or queries, feel free to drop a comment.

How to Create a Custom Assets Folder in Angular

Harshal Limaye — Wed, 09 Nov 2022 16:07:37 +0000

Every Angular app generated with @angular/cli comes bundled with an assets folder located inside the src directory. And any file or folder created inside the assets folder becomes publicly accessible. However, your options are not limited to this folder. You can easily create more assets like folders by adding their paths in the angular.json file. Let's understand this in detail with an example.

Let's say I want to create another folder inside src directory called users and add following json file to this folder.



{
  "firstName": "John",
  "lastName": "Doe",
  "username": "rambo_was_real",
  "occupation": "Mall Santa"
}

We'll name the file profile.json.

Once you've created the folder and added the file, you need to make Angular aware of this folder.

This can be done by simply dropping following line of code in your angular.json file under the assets array key.

And that's it! After doing this you can simply restart your Angular application and try to access the file via the web browser. If you've done everything as expected, you'll see following output in the web browser.

You can also query the profile.json file using the HttpClient Service.



this.http
  .get('/users/profile.json')
  .subscribe((response) => console.log(response));

I hope you enjoyed this post. In case you've any queries or feedback, feel free to drop a comment or reach out to me on Twitter @harshalslimaye.

Also, I would like to recommend another article I've written which talks about the technique called Virtual Scrolling in Angular which allows the developers to display subset of large lists within small viewports and change the subset data as user continues to scroll through the list.