Electron App with Angular 2 reload issue [duplicat

Question

This question already has an answer here:

• Angular 2.0 router not working on reloading the browser 31 answers

I'm working on an Electron desktop app with Angular 2. Everything boots up just fine and works as it should, but it fails when I reload the application.

It appears to be an issue with the routing. With no routing the app will reload just fine and display the changes made, but with routing it returns a blank html page (even the entire main index.html is completely void of any resources).

Has anyone ran into this issue, or perhaps understand where the process is failing and how to fix it?

Answer 1

I've spent a lot of hours trying to solve this annoying issue. It looks like when the router is actioned it sets the location.href to file:///yourroute, so when it reloads, no joy. I tried adding file:// + window.__filename to my base href but no luck. I really want to find a solution to this! Let me know if you solved it.

Answer 2

I've managed to work out a solution to the Angular2 with Electron refresh issue. Props to Thorston Hans for helping us determine the solution with the most current version of Electron and Angular2. Note that we have been following along the Angular2 Tour of Heroes walkthrough in Electron.

We quickly discovered after completing most of the routing section of Tour of Heroes that refreshing the electron browser window was causing the app to not refresh the current page correctly.

We correctly assumed this had to do with the way Angular2 and Electron handled the routing. We eventually assumed either Angular2 would need to support hashbang URL's or Electron would need to support HTML5 URL routing. Seemed like the latter was not immediately achievable in Electron so we turned to Angular2 to provide us a way to get hashbang's back in the URL path.

Below is the code we used to get the routing working in Electron.

app.component.ts

import { Component }       from 'angular2/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard.component';
import { RouteConfig, ROUTER_DIRECTIVES } from 
'angular2/router';
import {Location} from 'angular2/src/platform/browser/location/location'

@RouteConfig([
  {
      path: '/heroes',
      name: 'Heroes',
      component: HeroesComponent
  },
  {
      path: '/dashboard',
      name: 'Dashboard',
      component: DashboardComponent,
      useAsDefault: true
  }
])

@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <nav>
        <a [routerLink]="['Dashboard']">Dashboard</a>
        <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [
        HeroService
        ]
})

export class AppComponent {    
    title = 'Tour of Heroes';
}

Note we removed the ROUTER_PROVIDERS from the "providers" list (leaving just HeroService) and also removed it from the import statements at the beginning fo the file. We also added an import statement for Location. The idea here is to get Angular2 to use hashbang URLs.

Next is the app.ts file.

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {provide} from 'angular2/core';  

import {ROUTER_PROVIDERS} from 'angular2/router';

import {LocationStrategy} from      'angular2/src/platform/browser/location/location_strategy';

import {HashLocationStrategy} from      'angular2/src/platform/browser/location/hash_location_strategy';

import { bootstrap }    from 'angular2/platform/browser';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy,
    { useClass: HashLocationStrategy })]);

This took some digging to find the right Angular2 folders which contained the exports, but there they are in all their glory. So, basically, we tell Angular2 to use a "HashLocationStrategy" when resolving URLs. We were then able to refresh the application browser window within Electron and our page refreshed as expected. Note Your index.html file does not need a <base href> tag when using this approach. I'm not clear on the details, but I assume the bootstrapping that occurs with HashLocationStrategy takes care of this. Hope this helps!

Answer 3

I actually can't confirm because I moved on to React and ended up running into the same issue using React-Router BrowserHistroy. But it looks like Angular 2 is using Html5 clean urls as a default. (ie: your-base/your-route). So Electron on reload is looking for "your-base/your-route" which isn't an actual location.

Using hashbang style URLs works just fine. (ie: your-base/#your-route). So with React, hashHistory routes as expected. I did not explore if Angular 2 allows for using hashbang urls, but if it does I would bet it will solve the problem. (or explore if Electron can be configured to use html5 style routes)