Angular2 : Adding an observer only in the root module of a multi modular angular2 app does not work

Question

In my project i have multiple modules and I have created one shared service which is available in the utility module. The service is as below :

@Injectable()
export class ProgressloaderService {
  private isLoading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  constructor() { }
  showLoader(){
    this.setIsLoading(true);
  }

  hideLoader(){
    this.setIsLoading(false);
  }

  getIsLoading(): Observable<boolean> {
    return this.isLoading.asObservable();
  }

  setIsLoading(val : boolean): void {
    this.isLoading.next(val);
  }
}

The Map of the app is like :

The Utility module is as below :

In the Root component of Home module following code is placed :-

In the ts file of component folloeing code is done:

  ngOnInit(): void {
            this.loaderService.getIsLoading().subscribe((isLoading) => {
                this.isLoading = isLoading;
            });

        }

And in Html file the code is as below :

  <app-loader *ngIf="isLoading"></app-loader>

Above things work fine when implemented in single module app where there is only one root module but in this multi module app the thing does not work.

Now the components in other module will be loaded in this component as per requirement.

In the current app also if I add the observable code in root component of every sub module but that will require to add the html interceptor in each sub module.

So I need a solution which will help me to have only one HTML interceptor in utility module and a observable required in only root module of the app