title: Angular 6 - Serving different index files depending on the environment
body: <p>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.</p>
  
  <p>I want an easy way to handle this. Inside the <code>angular.json</code> there is a file_replacement configuration option. This works for switching out the <code>environment.ts</code> to an <code>environment.prod.ts</code> but it does not seem to work for replacing the <code>index.html</code> file to a <code>index.prod.html</code>.</p>
  
  <pre><code>{
      "$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"
          }
      }
  }
  </code></pre>