Angular2: добавление наблюдателя только в корневой модуль мультимодульного приложения angular2 не работает

Question

В моем проекте у меня есть несколько модулей, и я создал один общий сервис, который доступен в служебном модуле. Сервис как ниже:

@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);
  }
}

Карта приложения выглядит так:

Модуль утилит, как показано ниже:

В компоненте Root модуля Home размещен следующий код:-

В файле ts компонента сделан следующий код:

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

        }

И в HTML-файле код выглядит так:

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

Все вышеперечисленное прекрасно работает, когда реализовано в одномодульном приложении, где есть только один корневой модуль, но в этом многомодульном приложении это не работает.

Теперь компоненты в другом модуле будут загружены в этот компонент согласно требованию.

В текущем приложении также, если я добавлю наблюдаемый код в корневой компонент каждого подмодуля, но для этого потребуется добавить html-перехватчик в каждый подмодуль.

Поэтому мне нужно решение, которое поможет мне иметь только один HTML-перехватчик в служебном модуле и наблюдаемый, необходимый только в корневом модуле приложения.