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

@Injectable()
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$) {
            this._sub$.unsubscribe();
        }
    }
}

Component 1 & Component 2

ngOnInit() {
    const timerSub$ = this._timerService.subscribe(x => {
      console.log(x);
      this.count = x;
      if (x === 50) {
        this._timerService.unsubscribe();
        console.log('stopped');
        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.