When developing locally, you may want to use live reloading (or hot reloading). However, when packaging for distribution, the application needs to have access to the production output.

The Angular CLI allows us to quickly compile a web application in production mode. You can do this by running the following command:

ng build --prod

According to the Angular documentation, the —prod switch does the following:

This means that you get a minimal and highly optimized output, as follows:

You will probably run this command often when preparing production builds. It would be a good idea to have a shortcut command to avoid typing out all the parameters. The best way to achieve this is to have an entry in the package.json file. Let's create one now:

1. Let's update the package.json file and so we have build.prod script that contains various flags that will save us time in future:

      "build.prod": "ng build --prod",

2. Don't forget that, for Electron, we also have to change the base path property inside the index.html file:

      <base href="./" />

3. The ng build command in the Angular CLI provides support for that scenario as well. You can use the —baseHref parameter to provide a custom value:

      "build.prod": "ng build --prod --baseHref=./",

4. Excluding the dependencies and devDependencies sections, your package.json file should now look as follows:

      {
        "name": "integrate-angular",
        "version": "0.0.0",
        "main": "main.js",
        "scripts": {
          "ng": "ng",
          "serve": "ng serve",
          "start": "electron .",
          "build": "ng build",
          "build.prod": "ng build --prod --baseHref=./",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e"
        },
      }

5. Let's test the whole setup. Switch to your Terminal or console window and run the following command:

      npm run build.prod

6. Check out the index.html file in the dist folder; it should now contain a custom base path value:

In the next section, we are going to learn how to set up conditional loading support.