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.

Barkentine

JHipster does not fully support angular.json, not sure your changes are taken into account, especially the build is not handled by angular-cli – Tomas

Then how do I accomplish the same thing in my tech stack? – Barkentine

Have you looked at webpack/webpack.common.js? it defines some constants like DEBUG_INFO_ENABLED which are then used in angular files to modify some behavior depending on whether your app runs in dev or prod. – Tomas

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

Efficacious

Didn't know there is a separate section for index file replacement, was using fileReplacements and it wasn't working at all – Conjuration

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

Otolaryngology