RxJs Subscription does not get fired in the root angular module

Question

I have a component that listens to http calls for displaying loaders. I have spinner component and a spinner service having a spinnerEvent$ Angular4 Event Emitter. Here is my component constructor.

constructor(
    private spinnerService: SpinnerService
) {
    this.subscription = spinnerService.spinnerEvent$.subscribe((spinnerEvent: any) => this.updateSpinnerState(spinnerEvent));
    console.log(this.subscription);
}

For the angular application lazy loading is being used. The issue is that I want to add this component to the app.component.html below the router-outlet but on doing so, my subscription method never gets fired. The subscription appears as defined on my logs. When I place the same component on the child modules, the subscription starts working. Both the spinner component and the spinner service are in a shared module that has been injected into the app.module.ts. I am not sure what causes this difference in behavior of the subscription.

Answer 1

This issue got fixed when I moved my spinner component and spinner service from the shared module and defined it in the app.module. Currently trying to understand why, as my app.module had the component imported from shared module previously.