angular 2 router.navigate doesn't work with electron IPC callback

Question

I am developing and angular 2 application with electron. Here's what i am trying to do.
I have a next button in html <button (click) = nextButtonClickedHandler()>

the nextButtonClickedHandler is described as follows:

public nextButtonClickedHandler() {
  this.requestElectronMainProccess(this.afterResponseReceived);
}

private public afterResponseReceived() {
  this._router.navigate(['/next', 'route']);
}

public requestElectronMainProccess(callbackFn: Function) {
  this._electronService.send('request', 'some data');
  this._electronService.once('response', callbackFn);
}

So, here, the event log on the console after _router.navigate says

1. RoutesRecognised
2. Guards Check Begin
3. Guards Check Successful
4. Guards Check End
5. Navigation End

I also added a console statement to see what the promise is returning.

this._router.navigate(['/next', 'route']).then(
 success => console.log('navigation success');
 failure => console.log('navigation end');
);

it prints "Navigation success". But, the component does't load. Not sure what is happening. Any help is greatly appreciated.

Note: this doesnt happen if electron is not involved. for example the below code works perfectly fine

public nextButtonClickedHandler() {
  this._router.navigate(['/next', 'route']);
}

Answer 1

workaround...

import { Router } from '@angular/router';
import { NgZone } from '@angular/core';

constructor(private zone: NgZone, private router: Router){
  ipcRenderer.on('youevent', (event) => 
     this.zone.run(() => this.router.navigate([path]))
  )
}