How to replace index.html in Angular 8.3+ depending on environment?

Question

I am working on an application that was set up using jhipster, Spring Boot and Angular

I need to set up different public keys for something depending on whether the app is running on dev or prod.

I've been sitting in my angular.json for quite some time now, and googled a bunch of solutions, trying all the angular.json based ones.

Here's what I tried in angular.json:

• The old usage of "index"
• fileReplacements
• The new index "input" "output" options
• With the latter, I've cycled through every way of writing the path to the index files that I could think of (including just the filename).

All three of my index files are in the webapp directory.
angular.json(relevant bit):

  "root": "",
  "sourceRoot": "src/main/webapp",
  "projectType": "application",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "index": "src/main/webapp/index.html",
        "configurations": {
          "production": {
            "index": {
              "input": "src/main/webapp/index-prod.html",
              "output": "src/main/webapp/index.html"
            }
          }
      },
        "scripts": [

        ],
        "styles": [
          "./src/main/webapp/teststyle.css"
        ]
      }
    }
  }

The project does not have environment.ts files, but enableProdMode() is being called (through webpack magic) and behaves as expected.

What can I do? Ideally we would like to not have to rebuild between environments, but at this point I'll take it as long as the index.html file changes automatically.

Answer 1

The index option supports a longhand form as follows:

"index": {
  "input": "src/index.html", // used index file from your project folder
  "output": "index.html", // created index file in your outputPath
},

angular.json example:

"architect": {
  "build": {
    "options": {
      "outputPath": "dist/myproject",
      "index": "src/index.html", // default index file (shorthand form)
    },
    "configurations": {
      "production": {
        "index": { // production index replacement (longhand form)
          // use the file at 'src/index.prod.html' in production builds
          "input": "src/index.prod.html",
          // create the index file under 'index.html' in your outputPath
          "output": "index.html"
        }
      }
    }
  }
}

This feature was added in Angular Cli v8.2.0-next.0.

Related GitHub issue: https://github.com/angular/angular-cli/issues/14599

Answer 2

In addition to @fridoo's answer. Net Basal have created a wonderful article about the options that we have in this case.

netbasal | environment-based-index-html-with-angular-cli