Question

我正在使用Angular 2处理一个Electron桌面应用程序。一切都很好地启动并按预期工作，但是当我重新加载应用程序时它会失败。

这似乎是路由问题。没有路由，应用程序将重新加载正常并显示所做的更改，但通过路由它返回一个空白的html页面（甚至整个主index.html完全没有任何资源）。

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

Answer 1

我设法通过Electron刷新问题找出Angular2的解决方案。使用最新版本的Electron和Angular2向Thorston Hans for helping us determine the solution道具。请注意，我们一直在跟随Angular2英雄之旅在Electron中进行演练。

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

我们正确地认为这与Angular2和Electron处理路由的方式有关。我们最终假设Angular2需要支持hashbang URL，或者Electron需要支持HTML5 URL路由。看起来像后者在Electron中无法立即实现，所以我们转向Angular2为我们提供了一种方法，让我们回到URL路径中。[/ p>

以下是我们用于在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';
}

请注意我们删除来自＆＃34;提供商＆＃34;的ROUTER_PROVIDERS list（只留下HeroService）并将其从文件开头的import语句中删除。我们还为Location添加了一个import语句。这里的想法是让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使用＆＃34; HashLocationStrategy＆＃34;在解析URL时。然后我们能够在Electron中刷新应用程序浏览器窗口，并按预期刷新页面。注意使用此方法时，index.html文件不需要<base href>标记。我不清楚细节，但我认为HashLocationStrategy发生的引导可以解决这个问题。希望这有帮助！

Answer 2

我花了很多时间试图解决这个恼人的问题。看起来当路由器被操作时它将location.href设置为file：/// yourroute，所以当它重新加载时，没有快乐。我尝试将file：// + window .__ filename添加到我的基础href，但没有运气。我真的想找到解决方案！如果你解决了，请告诉我。

Answer 3

我实际上无法确认，因为我转向了React并最终使用React-Router BrowserHistroy遇到了同样的问题。但看起来Angular 2使用Html5清理网址作为默认设置。（即：你的基地/你的路线）。所以电子重装正在寻找＆＃34;你的基础/你的路线＆＃34;这不是一个实际的位置。

使用hashbang样式的URL工作得很好。（即：你的基础/＃你的路线）。所以使用React，hashHistory路由按预期方式。我没有探究Angular 2是否允许使用hashbang url，但如果确实如此，我敢打赌它会解决问题。（或探索是否可以将Electron配置为使用html5样式路线）

具有Angular 2重载问题的电子应用

3 个答案: