Agfdhyk

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?

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

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..

Found the problem: it was because of the Router, needed as dependency by a service injected in ApplicationService.

See example:
https://stackblitz.com/edit/angular-xwyugy

When Router is removed from the ApplicationService, the double instantiation is gone.

Can't understand why, so I'll wait for a better answer for approving.