CODEWITHSUNDEEP
angularelectron
prabhu
prabhu

Reputation: 369

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

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']);
}

Upvotes: 3

Views: 1636

Answers (3)

Simone
Simone

Reputation: 91

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]))
  )
}

Upvotes: 6

Daaren
Daaren

Reputation: 36

I stumbled in the same trouble, but with the "dialog" APIs. I noticed this happens not only with Electron APIs, but also with Node.js APIs; in general calling a route function inside a callback raise the issue.

I noticed also that if inside the callback some data of the Angular component are changed, the interface is not updated; I had to make an explicit call to the change detector: this.changeDetector.detectChanges();
I remember similar problems in AngularJS, when the apply() function has to be called if some work was done "outside" the Angular boundaries; maybe the issues are related.

In my case I was able to circumnvent the problem by switching to the "syncronous" version of Electron.remote.dialog, instead of:

this.electronService.remote.dialog.showOpenDialog({title:'Output Folder',  
properties: ["openDirectory"] },  (folders) => {
     this.projectService.theProject.targetFolder = folders[0];
     this.changeDetector.detectChanges();
     this.router.navigateByUrl('/open');
});

I tried this:

  var folders = this.electronService.remote.dialog.showOpenDialog({title:'Output Folder', 
         properties: ["openDirectory"] });
  if (folders) {
    this.projectService.theProject.targetFolder = folders[0];
    this.router.navigateByUrl('/open');
  }

Not only it works in my case (Windows 8 /10), but I can also get rid of the change detector update.

Hope this helps.

PS: I used ngx-electron to wrap the Electron APIs

Upvotes: 1

Markus Guder
Markus Guder

Reputation: 671

Created a bug ticket in electron's github repository. => https://github.com/electron/electron/issues/11809

I have the same problem.

Upvotes: 0

Related Questions