22

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.

Marvin Falkner
  • 221
  • 1
  • 2
  • 3
  • JHipster does not fully support angular.json, not sure your changes are taken into account, especially the build is not handled by angular-cli – Gaël Marziou Dec 14 '19 at 21:50
  • Then how do I accomplish the same thing in my tech stack? – Marvin Falkner Dec 18 '19 at 11:44
  • 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. – Gaël Marziou Dec 18 '19 at 14:43

2 Answers2

52

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

frido
  • 13,065
  • 5
  • 42
  • 56
  • 1
    Didn't know there is a separate section for `index` file replacement, was using `fileReplacements` and it wasn't working at all – Shaharyar Oct 04 '20 at 08:53
3

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
StPaulis
  • 2,844
  • 1
  • 14
  • 24