Angular timer observable and reusing subscription between multiple components

I have got a custom timer service which is injected into 2 components. The intention is to start the timer (configured with 1 sec interval) upon initialising component 1, log the value into console every sec, and navigate to a different route after hitting the count, say 50.

The redirection happens correctly when I stay in component 1 and let the time run out after 50. But I don't get redirected if I am in component 2 for some reason. The timer still keeps counting until reaches the limit, but just won't allow the redirection.

Below is the code I've tried so far.

Timer service

export class TimerService {
    private readonly interval = 1000;
    private _timer$: Observable<number>;
    private _sub$: Subscription;

    constructor() {
        this._timer$ = timer(0, this.interval);

    public get timer(): Observable<number> {
        return this._timer$;

    public subscribe(fnExp: any): Subscription {
        if (!this._sub$) {
            this._sub$ = this._timer$.subscribe(fnExp);
        return this._sub$;

    public unsubscribe() {
        if (this._sub$) {

Component 1 & Component 2

ngOnInit() {
    const timerSub$ = this._timerService.subscribe(x => {
      this.count = x;
      if (x === 50) {
        this._router.navigate(['../'], {relativeTo: this._route});

So this line this._router.navigate(['../'], {relativeTo: this._route}) doesn't seem to work.

Any help would be much appreciated.