带有 Angular 2 重新加载问题的电子应用程序 [英] Electron App with Angular 2 reload issue

问题描述

我正在使用 Angular 2 开发一个 Electron 桌面应用程序.一切都可以正常启动并且可以正常工作，但是当我重新加载应用程序时它会失败.

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.

似乎是路由问题.如果没有路由，应用程序将重新加载并显示所做的更改，但使用路由它会返回一个空白的 html 页面(甚至整个主 index.html 都完全没有任何资源).

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?

推荐答案

我已经设法解决了 Angular2 的 Electron 刷新问题.支持 Thorston Hans 用最新版本的 Electron 和 Angular2 帮助我们确定解决方案.请注意，我们一直在关注 Electron 中的 Angular2 Tour of Heroes 演练.

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.

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

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.

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

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

app.component.ts

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';
}

请注意，我们从providers"列表中删除了 ROUTER_PROVIDERS(只留下 HeroService)，并且还从文件开头的 import 语句中删除了它.我们还为 Location 添加了一个导入语句.这里的想法是让 Angular2 使用 hashbang URL.

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.

接下来是 app.ts 文件.

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

这需要一些挖掘才能找到包含导出的正确 Angular2 文件夹，但它们在那里是它们的全部荣耀.因此，基本上，我们告诉 Angular2 在解析 URL 时使用HashLocationStrategy".然后，我们能够在 Electron 中刷新应用程序浏览器窗口，并且我们的页面按预期刷新.注意 使用这种方法时，您的 index.html 文件不需要需要 <base href> 标记.我不清楚细节，但我假设 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!

这篇关于带有 Angular 2 重新加载问题的电子应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！