Приложение Electron с вопросом о перезапуске с угловым 2

Question

Я работаю над настольным приложением Electron с угловым 2. Все загружается просто отлично и работает так, как должно, но это не удается при перезагрузке приложения.

Похоже, что проблема связана с маршрутизацией. Без маршрутизации приложение будет перезагружаться просто прекрасно и отображать сделанные изменения, но с маршрутизацией он возвращает пустую страницу html (даже весь основной index.html полностью лишен каких-либо ресурсов).

Кто-нибудь сталкивался с этой проблемой или, возможно, понимал, где происходит процесс и как его исправить?

Answer 1

Я потратил много часов, пытаясь решить эту неприятную проблему. Похоже, когда маршрутизатор работает, он устанавливает location.href в файл: /// yourroute, поэтому, когда он перезагружается, никакой радости. Я попытался добавить файл: // + window .__ filename в мою базу href, но не повезло. Я действительно хочу найти решение этого! Дай мне знать, разрешишь ли ты это.

Answer 2

На самом деле я не могу подтвердить, потому что я перешел к Реагированию и в итоге столкнулся с тем же вопросом, используя React-Router BrowserHistroy. Но похоже, что Angular 2 использует чистые URL-адреса Html5 по умолчанию. (то есть: ваша база/ваш маршрут). Поэтому Electron on reload ищет «вашу базу/ваш маршрут», которая не является фактическим местоположением.

Использование URL-адресов стиля hashbang прекрасно работает. (т. е. ваш-base/# ваш маршрут). Так что с React, hashHistory маршруты, как ожидалось. Я не исследовал, разрешает ли Angular 2 использовать хешбанговые URL-адреса, но если бы я сделал ставку, это решит проблему. (или исследовать, можно ли настроить Electron для использования маршрутов стиля html5)

Answer 3

Мне удалось найти решение для Angular2 с проблемой обновления электрона. Реквизит для Thorston Hans for helping us determine the solution с самой современной версией Electron и Angular2. Обратите внимание, что мы следовали по прохождению Angular2 Tour of Heroes в Electron.

Мы быстро обнаружили после завершения большей части раздела маршрутизации Tour of Heroes, что обновление окна электронного браузера привело к тому, что приложение не обновляло текущую страницу правильно.

Мы правильно предположили, что это связано с тем, как Angular2 и Electron обрабатывали маршрутизацию. В конечном итоге мы предполагали, что либо Angular2 должен будет поддерживать URL-адрес hashbang, либо Electron должен будет поддерживать маршрутизацию URL HTML5. Казалось, что последнее не было сразу доступно в Electron, поэтому мы обратились к Angular2, чтобы предоставить нам способ вернуть hashbang обратно в URL-адрес.

Ниже приведен код, который мы использовали для получения маршрутизации, работающей в 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'; 
} 

Примечание мы удалены в ROUTER_PROVIDERS из списка «поставщиков» (оставив только HeroService), а также удалить его из операторов импорта в начале Fo файла. Мы также добавили оператор импорта для Location. Идея здесь заключается в том, чтобы заставить Angular2 использовать URL-адреса hashbang.

Следующий файл 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 использует «HashLocationStrategy» при разрешении URL-адресов. Затем мы смогли обновить окно браузера приложения в Electron, и наша страница обновилась, как ожидалось. Примечание Ваш индекс.Файл html делает не необходимо использовать тег <base href> при использовании этого подхода. Я не знаю подробностей, но я предполагаю, что начальная загрузка, которая происходит с HashLocationStrategy, позаботится об этом. Надеюсь это поможет!