"No provider for service" in APP_INITIALIZER factory

Issue

In my backend, I have some API resources which return some configuration information to the frontend. Since I don't want to call them for each resource I show, I want to do it upfront.

From what I've seen, APP_INITIALIZER looks promising, so I tried it: https://stackblitz.com/edit/angular-ivy-4yfvtk?file=src%2Flink.service.ts But it is not able to inject the LinkService.

I added the service with deps to the AppModule. I am not quite sure what the issue is. Furthermore, I've checked other topics, but as far as I can tell it is the same.

What am I missing?

Solution

You got it wrong little bit.

First, your init funtion must return a function that produces a promise

export function initLinkService(service: LinkService) {
  return () =>
    new Promise((resolve, reject) => {
      console.log('before init', service);
      service.init();
      console.log('after init', service);
      resolve(null);
    });
}

Then you have to actually provide LinkService by including it into providers section. Moreover, you have to import HttpClientModule. Then you provide init method directly

@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule], //import
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [
    LinkService, // required provider
    {
      provide: APP_INITIALIZER, 
      useFactory: initLinkService, //pass factory method directly
      deps: [LinkService],
      multi: true,
    },
  ],

Now, it will work https://stackblitz.com/edit/angular-ivy-4yfvtk?file=src%2Fapp%2Fapp.module.ts

Answered By - Antoniossss