Service instantiated twice after APP_INITIALIZER

Question

Problem is: I need to make an http call and store an object that is needed for generate dynamic routes. So, I was taking advantage of the APP_INITIALIZER.

// app.module.ts
import { ApplicationService } from './application.service';


providers: [
  ApplicationService,
  { 
  provide: APP_INITIALIZER, useFactory: appServiceFactory, deps: 
  [Injector, ApplicationService], multi: true 
  },
],

function appServiceFactory(injector: Injector, appService: ApplicationService): Function {
  return () => {
    return appService.loadApplication().then((app: Application) => {
      /custom logic
      });
    });
  };
}


// application.service.ts
@Injectable({
  providedIn: 'root'
})

// navigation.component.ts
import { ApplicationService } from './application.service';

export class NavigationComponent implements OnInit {

    constructor(private _applicationService: ApplicationService) {
  }
}    

But inside navigation.component, applicationservice is initialized again. I'm sure of that because if I log or put a debugger statement, the construct() method of the service is called twice.

Why even if the Service is declared as singleton with the providedIn: root is being reinstantiated?

Answer 1

The reason for this is that once you include Router in dependencies to your APP_INITIALIZER factory you get circular dependency (https://github.com/angular/angular/blob/4c2ce4e8ba4c5ac5ce8754d67bc6603eaad4564a/packages/router/src/router_module.ts#L61-L64).

ApplicationService
       |
    TestService
       |
     Router
       |
  ApplicationRef
       |
ApplicationInitStatus
       |
 APP_INITIALIZER
       |
ApplicationService

To solve this you can get Router lazily:

export class TestService {

  get router() {
    return this.injector.get(Router)
  }

  constructor(private _http: HttpClient, private injector: Injector ) {
  }
}

Forked Stackblitz

Answer 2

Based on your Explanation that you have added the providedIn: root in the application.service.ts , that means it will be added to the root module (i.e Appmodule.ts) and again in the Appmodule.ts in your provider array you are adding ApplicationService.

From this Blog its state that

"There is now a new, recommended, way to register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute. It accepts 'root' as a value or any module of your application. When you use 'root', your injectable will be registered as a singleton in the application, and you don’t need to add it to the providers of the root module. Similarly, if you use providedIn: UsersModule, the injectable is registered as a provider of the UsersModule without adding it to the providers of the module."

this is creating the service to be reinstantiated

Edit1 : Another thing to check is , 1. How are you calling this service i mean in Dev mode or Prod mode , if its dev mode then service will be called twice

If you're running in development mode, it will run the function at least twice. since in development mode it does a check, changes, then rechecks to verify, where production mode only does the first check, assuming you've done your quality assurance and resolved any values the get changed post checking.

Source

Try to check in Prod Mode and verify it..