Creating a Standalone Self Initializing Angular Asset Service

Image by PublicDomainPictures from Pixabay

Scenario

We have an asset service that loads SVG assets for us and makes them available in the MatIconRegistry .

In the pre Angular 15 version of the service the initialization was done in the service module’sconstructor .

constructor(private a: AssetService) {
   a.init()
}

The writeup for the first version is here.

Creating a Packaged Self Initializing Angular Material Icons Assets Service

Here’s the full demo pre Angular 15 demo.

We want to convert this to a standalone service.

Approach

We will use the multi-token ENVIRONMENT_INITIALIZER allowing us register code that gets executed as the application boots. Also note that we are including provideHttpClient() since the MatIconRegistry uses this to fetch the SVG asset via the provided URL.

bootstrapApplication(App, {
  providers: [
    provideHttpClient(),
    {
      provide: ENVIRONMENT_INITIALIZER,
      multi: true,
      useValue: () => inject(AssetService).init(),
    },
  ],
});

Demo