带有Angular 2重装问题的Electron App [英] 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页面(即使整个main 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?

推荐答案

我设法解决了带有Electron刷新问题的Angular2解决方案. Thorston Hans的道具通过最新版本的Electron和Angular2帮助我们确定解决方案 .请注意，我们一直在遵循Electron中的Angular2英雄巡游演练.

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

请注意，我们已从列表中删除了ROUTER_PROVIDERS(仅保留了HeroService)，并且还在文件开头将其从import语句中删除了.我们还为位置添加了一个导入语句.这里的想法是让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文件不需要不需要标签.我不清楚细节，但我假设与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重装问题的Electron App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！