Angular 6 - modify index.html file reference path when building

Question

When building angular 6 app, the scripts files are generated and so the css file. All the files have the hashed value in the end.

Is it possible to modify the index.html links for these files? The path is always local file but if i upload them on some server i want for example tho add a custom variable url i have in environment.prod.json.

Answer 1

Yes you can create a custom index.html (e.g. index.prod.html) for each environment:

Create in your src folder another copy of index.html (index.prod.html) include any custom links you need in that index for that environment and inside angular.json add the following (the fileReplacement part):

      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": false,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            },
            {
              "replace": "src/index.html",
              "with": "src/index.prod.html"
            }
          ]
        },

Please note this options is fixed and working on Angular 6.1 before that you couldn't use the fileReplacements for index files.