Electron 应用程序与 Angular 2 重新加载问题[重复]

我正在使用 Angular 2 开发 Electron 桌面应用程序。一切都启动得很好并且按预期工作，但是当我重新加载应用程序时它失败了。

看来是路由的问题。如果没有路由，应用程序将很好地重新加载并显示所做的更改，但如果有路由，它会返回一个空白的 html 页面（甚至整个主 index.html 完全没有任何资源）。

有没有人遇到过这个问题，或者也许了解该过程失败的地方以及如何修复它？

我已经设法解决 Angular2 with Electron 刷新问题。托斯顿·汉斯的道具帮助我们确定解决方案 https://github.com/ThorstenHans/electron-ts-ng2使用最新版本的 Electron 和 Angular2。请注意，我们一直在 Electron 中进行 Angular2 英雄之旅演练。

在完成《英雄之旅》的大部分路由部分后，我们很快发现刷新电子浏览器窗口会导致应用程序无法正确刷新当前页面。

我们正确地假设这与 Angular2 和 Electron 处理路由的方式有关。我们最终假设 Angular2 需要支持 hashbang URL，或者 Electron 需要支持 HTML5 URL 路由。似乎后者在 Electron 中无法立即实现，因此我们求助于 Angular2，它为我们提供了一种将 hashbang 放回 URL 路径的方法。

下面是我们用来让路由在 Electron 中工作的代码。

应用程序组件.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从“提供者”列表中删除 ROUTER_PROVIDERS（仅留下 HeroService），并将其从文件开头的导入语句中删除。我们还添加了 Location 的导入语句。这里的想法是让 Angular2 使用 hashbang URL。

接下来是 app.ts 文件。

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

这需要一些挖掘才能找到包含导出的正确 Angular2 文件夹，但它们在那里非常荣耀。因此，基本上，我们告诉 Angular2 在解析 URL 时使用“HashLocationStrategy”。然后，我们能够刷新 Electron 中的应用程序浏览器窗口，我们的页面也按预期刷新。Note你的index.html文件确实not need a <base href>使用此方法时标记。我不清楚细节，但我假设 HashLocationStrategy 发生的引导会处理这个问题。希望这可以帮助！