How can I access environment variables in index.html?

Question

I'm trying to implement Google Analytics. I have different tracking codes for each of my environments (dev, prod, etc). I don't have access to environments.ts from index.html as far as I know.

I tried loading the script from inside Angular, but then I lost tracking of how long the app's initial load took. I also saw that .angular-cli.json has a scripts section that I could possibly use, but I don't know how I'd switch which script I run based on the environment.

How can I set this up?

You can't access environment variables there. It's just a static file. Try using something like Angulartics. — jonrsharpe
– jonrsharpe, Commented Jul 14, 2017 at 15:08
I am. Angulartics tells me to put my GA script tag in index.html and doesn't mention environments in their documentation at all. — adamdport
– adamdport, Commented Jul 14, 2017 at 15:12

Soluzione IT Services · Accepted Answer · 2020-04-20 08:56:55Z

1

For Angular 8 or above version just modify the production:configuration section in angular.json as below

    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "index": "src/index.html"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "index": "src/index.prod.html"
        }
      }
    }

Hope this answer helps.

Regards, Kirti Singh | Soluzione IT Services

answered Apr 20, 2020 at 8:56

Soluzione IT Services

211 bronze badge

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

Comments

adamdport · Accepted Answer · 2018-10-31 19:11:14Z

0

As of Angular 6 you can configure file replacements in angular.json:

"configurations": {
  "dev": {
    ...
    "fileReplacements": [
      {
        "replace": "src/myScripts.js",
        "with": "src/myScripts.dev.js",
      }
    ]
  },
  "production": {
    ...
    "fileReplacements": [
      {
        "replace": "src/myScripts.js",
        "with": "src/myScripts.prod.js",
      }
    ]
  }

answered Oct 31, 2018 at 19:11

adamdport

12.8k14 gold badges73 silver badges94 bronze badges

Collectives™ on Stack Overflow

How can I access environment variables in index.html?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related