Live Reloading (or Hot Reloading) is a feature that allows you to reload your browser every time code changes. Developers often use this feature when they're building and testing web applications. Given that Electron contains a browser instance, the Live Reloading feature can apply to desktop applications as well.

You already know how to serve an Angular CLI application locally and that you can navigate to http://localhost:4200 to use it in the browser. The solution for local development is to make your Electron application use the same address to load the main index.html content, instead of the prebuilt file. Let's get started:

1. To see this in action, update the main.js file according to the following code:

      // win.loadURL(`file://${__dirname}/dist/integrate-angular
           /index.html`);

      win.loadURL(`http://localhost:4200`);

Now, it's time to see the live reloading feature in action.

2. Run the serve command and ensure that the application is up and running:

      npm run serve

You should see the following output if everything is OK:

      Hash: 580d684324c23500227d
      Time: 10770ms
      chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map 
      (es2015-polyfills) 284 kB [initial] [rendered]
      chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
      chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 
        236 kB [initial] [rendered]
      chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB 
        [entry] [rendered]
      chunk {styles} styles.js, styles.js.map (styles) 16.7 kB 
        [initial] [rendered]
      chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB 
        [initial] [rendered]
      i ⌈wdm⌋: Compiled successfully.

Remember the number of files that Angular CLI builds; we are going to get back to that in a minute.

3. Now, switch to another Terminal window and start the Electron app in parallel to it:

      npm start

Note that the web server should still be running.

4. The good news is that you can test your application against your desktop and browser at the same time. Feel free to open http://localhost:4200 in your browser. You should see the same code running in both windows, and that both of them are reloaded when changes are made to them:

5. Now, with the browser tab open and the Electron application running, go to the src/app/app.component.ts file and change the tile by updating its content with the following code:

      import { Component } from '@angular/core';

      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
      })
      export class AppComponent {
        title = 'Angular Electron';
      }

6. Take a look at the Terminal instance where the web server is running. Notice that the main.js and main.js.map files recompile when an update occurs:

      Hash: 042ed91436c7c2fe2749 - Time: 2046ms
      5 unchanged chunks
      chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
      i ⌈wdm⌋: Compiled successfully.

7. If you have a browser or an Electron shell—or both—running, the applications will automatically reload. You should see the updated title: