Service instantiated twice after APP_INITIALIZER

问题

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?

回答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

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

回答3:

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.

回答4:

I also faced an issue that my service was instantiated twice and from what I've seen in logs, one constructor was called from config.service.ts file and second from config.service.js (note the extension difference). It occurred that by mistake I imported my service like this:

import { ConfigService } from '../config/config.service.js';

instead of:

import { ConfigService } from '../config/config.service';

Changing it to proper import solved the issue.

来源：https://stackoverflow.com/questions/53226116/service-instantiated-twice-after-app-initializer

标签

angular