Angular 6 - Serving different index files depending on the environment

Question

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"
        }
    }
}

Pathik Vejani · Accepted Answer · 2023-07-27 13:45:46Z

36

This is supported from version @angular/[email protected].

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"
      }
    }
  }
}

edited Jul 27, 2023 at 13:45

Pathik Vejani

4,49711 gold badges66 silver badges110 bronze badges

answered Jun 11, 2018 at 6:24

Ludevik

7,3041 gold badge44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kay Over a year ago

Can you provide the angular github reference where this change was implemented?

Ludevik Over a year ago

github.com/angular/angular-cli/issues/…

Ludevik Over a year ago

yea, i am using it for over month now :)

Makla Over a year ago

It is not working for me. I am using Angular CLI: 6.1.1. File in wwwroot/dist is not index.prod.html, but index.html.

Ludevik Over a year ago

what version of @angular-devkit/build-angular are you using?

|

arthur.sw · Accepted Answer · 2019-11-18 15:47:58Z

4

As explained in this github issue, change angular.json to set your production index.html:

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

answered Nov 18, 2019 at 15:47

arthur.sw

11.8k11 gold badges52 silver badges112 bronze badges

Comments

Joseph Horsch · Accepted Answer · 2019-11-15 16:26:13Z

In Angular 8 "fileReplacements" did not work for replacing index.html. This was my solution.

Current Working Solution

...
"production": {
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
...

Full Build Configuration

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/bandbutter-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "./animate.min.css",
              "src/styles.css"
            ],
            "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

massic80 · Accepted Answer · 2019-07-30 14:57:08Z

1

I'm using Angular 8 and I don't know why it doesn't work on my side. But I can specify the location for the index.html for any build configuration (and looks like also serve) https://stackoverflow.com/a/57274333/3473303

answered Jul 30, 2019 at 14:57

massic80

3334 silver badges16 bronze badges

Comments

kuldeep chopra · Accepted Answer · 2022-11-08 04:54:46Z

0

you need to update your angular.json file for production configuration

see image.

answered Nov 8, 2022 at 4:54

kuldeep chopra

81212 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 6 - Serving different index files depending on the environment

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related