Angular + Electron - 应用程序在刷新或更改时中断

Question

如果导航到路由 localhost:4200/login 进行更改或刷新，它工作正常。

如果我导航到路由 localhost:4200/main 这是一个子模块(受 authguard 保护)，如果我对这些页面中的任何组件进行更改或刷新，我会收到以下错误。

profile:16 GET http://localhost:4200/main/inline.bundle.js net::ERR_ABORTED
12:53:35.010 profile:16 GET http://localhost:4200/main/polyfills.bundle.js net::ERR_ABORTED
12:53:35.019 profile:16 GET http://localhost:4200/main/styles.bundle.js net::ERR_ABORTED
12:53:35.053 profile:16 GET http://localhost:4200/main/vendor.bundle.js net::ERR_ABORTED
12:53:35.053 profile:16 GET http://localhost:4200/main/main.bundle.js 404 (Not Found)

我使用 ng serve --watch 为我的应用提供服务

@angular/cli: 1.4.5
node: 6.11.3
os: linux x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.5.3

还要注意它总是编译成功。

chunk {common} common.chunk.js, common.chunk.js.map (common) 13.8 kB {main}  [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 64.2 kB {vendor} [initial]
chunk {main.module} main.module.chunk.js, main.module.chunk.js.map () 83.2 kB {main} 
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 66.4 kB {inline} [initial]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.53 MB [initial]

webpack: Compiled successfully.

Answer 1

根据 this post ，问题出在 Electron 对 HTML5 样式 URL 的处理上。为了让它工作，您需要做的就是告诉 RouterModule 使用散列 URL，以类似于 Angular 1 的方式。

看起来像下面这样:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/your-route/
  ]...