Electron App with Angular 2 reload issue [duplicate]

Question

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 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!