CODEWITHSUNDEEP
angularangular-cli
Kay
Kay

Reputation: 19660

Angular + Electron - App breaks on refresh or change

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.

Upvotes: 5

Views: 2217

Answers (1)

jeddai
jeddai

Reputation: 799

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/
  ]...

Upvotes: 11

Related Questions