Angular + Electron - App breaks on refresh or change

Question

If navigate to the route localhost:4200/login make a change or refresh it works fine.

If i navigate to the route localhost:4200/main which is a submodule (protected by authguard), if i make a change to any components in these pages or refresh i get the following errors.

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)

i serve my app using 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

Also to note that it always compiles successfully.

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

According to this post, the issue lies in Electron's handling of the HTML5 style URL. In order to get it working, all you should need to do is tell the RouterModule to use the hashed URL, in a similar fashion to Angular 1.

That looks like the following:

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