Angular 2 Routes Breaking on Electron App Refresh


#1

Hi, I am new to Electron and trying out an app with Angular 2. The app runs fine after build and execution of Electron, but when Electron is refreshed only a blank html document is visible. It only happens when using Angular 2 routes. I’m sure it has to do with me not understanding the BrowserWindow model, but I can’t figure out the solution. Is this something anyone has ran into?


#2

I’ve been struggling with exact same issue, to the point that I’m even considering an alternative to routing. Did you find a solution for this?


#3

Unfortunately no, and I didn’t have the time luxury to figure it out. I ended up moving over to React over Angular 2 and everything seems good so far.


#4

For anyone else who comes across this, I believe the issue is due to Angular 2 using an html 5 style url as opposed to a hashbang style url. I can’t confirm as I moved on to React, but I came into the same issue using React browserHistory. Using Reacts hash style history works just fine.

So the answer would be is see if Angular 2 can use hashbang Urls or figure out how to configure Electron to understand html5 style routes.


#5

I’ve found a solution by setting useHash to true.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ]....

For more info see:
https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles


#6

first you should add this to imports
imports: [
BrowserModule,
NgxElectronModule,
RouterModule.forRoot(routes, { useHash: true }) // add :{ useHash: true }
],
than change <base href="./"> to <base href="">