Observable not firing in angular ngOnInit

Question

I seem to be having trouble initiating observable Subject in my angular app. I have a lodaer service like below.

import { Injectable } from '@angular/core';
import axios, { AxiosPromise } from 'axios';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class LoaderService {
    LoaderEvent: BehaviorSubject<boolean>;
    loaderState: string;
    constructor() {
        this.LoaderEvent = new BehaviorSubject(false);
    }

    get GetLoaderEvent(): Observable<boolean> {
        return this.LoaderEvent.asObservable();
    }

    addLoader(loader: boolean): void {
        this.LoaderEvent.next(loader);
    }

}

And in my loader component

ngOnInit() {
        this.loaderService.GetLoaderEvent.subscribe(
            (x) => {
                console.log('Next: ' + x.toString());
                this.loaders.push(this.loaders.length + 1);
            },
            (err) => {
                console.log('Error: ' + err);
            },
            () => {
                console.log('Completed', this.loaders);
            }
        );
}

In all other individual components

 ngOnInit() {

        this.loaderService.addLoader(true);
        this.myService
            .list
            .then(e => {
                this.myData= e.data;
                this.loaderService.addLoader(false);
            })
            .catch(err => {
                this.loaderService.addLoader(false);
            });
}

I want to fire the observable when ever an api call begin and ends in all other components/pages. My this.loaderService.addLoader(false); is supposed to fire my observable which i subscribe in loader component. However it doesn't . If i add my this.loaderService.addLoader(false); in loader component below the subscription then it works. WHat am i doing wrong pls ? Any help would be appreciated.

Answer 1

Found the cause of the problem. My loader component and service lies in sharedModule. I then added my loaderService in shareModule providers . It turns out if i want to use it across all other components, i have to move it to appModule instead . So moving

    import { LoaderService } from './services';
    @NgModule({
    ...
    providers: [LoaderService]
    })
export class SharedModule { }

from shared.module

to

import { LoaderService } from './shared/services';


    @NgModule({
    ...
    providers: [LoaderService]
    })
export class AppModule { }

Seems to work. Its now firing as expected.