Angular 6 - Serving different index files depending on the environment

Issue

I have a local environment and a production environment. Within the index.html i add or remove script files depending on if the environment is local or production.

I want an easy way to handle this. Inside the angular.json there is a file_replacement configuration option. This works for switching out the environment.ts to an environment.prod.ts but it does not seem to work for replacing the index.html file to a index.prod.html.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "demo": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "polyfills": "src/polyfills.ts",
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                },
                                {
                                    "replace": "src/index.html",
                                    "with": "src/index.prod.html"
                                }
                            ]
                        },
                        "test": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.test.ts"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "demo:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "demo:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "demo:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "karmaConfig": "./karma.conf.js",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "demo-e2e": {
            "root": "",
            "sourceRoot": "",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "./protractor.conf.js",
                        "devServerTarget": "demo:serve"
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "e2e/tsconfig.e2e.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "demo",
    "schematics": {
        "@schematics/angular:component": {
            "prefix": "app",
            "styleext": "scss"
        },
        "@schematics/angular:directive": {
            "prefix": "app"
        }
    }
}

Solution

This is supported from version @angular/cli@6.1.0-beta.2.

---

Update (November 2019):

The fileReplacements solution does not work with Angular CLI 8.0.0 anymore

Change angular.json to set your production index.html instead:

"architect":{
  "build": {
    "options": {
     "index": "src/index.html", //non-prod
    },
    "configurations": {
      "production":{
      "index": { //prod index replacement
        "input": "src/index.prod.html",
        "output": "index.html
      }
    }
  }
}

Answered By - Ludevik