How to use environment variable in index.html for Angular 6

Question

I am using angular6, in my project I am using Facebook Account Toolkit for mobile verification purpose.

I need to initialise Account toolkit in index.html file using following code.

  AccountKit.init({
   appId:"XX",
   state:"xx",
   version:"v1.2",
   fbAppEventsEnabled:true,
   debug:true
 });

The problem is, values for appId and state change depending on environment (development/test/production).

How can I use environment variables in index.html file.

Please let me know if anyone has a solution for angular 6.

Artem Krasniuk · Accepted Answer · 2023-06-14 12:00:16Z

94

You should create copy of index.html and name it index.someenv.html. Then in your angular.json in environment configuration setup file replacement:

"fileReplacements": [
    {
        "replace": "src/index.html",
        "with": "src/index.someenv.html"
    }
]

The angular cli will replace these files when you run your build

UPD: For Angular 8+ use this:

Add the following to your angular.json:

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

edited Jun 14, 2023 at 12:00

answered Sep 17, 2018 at 16:01

Artem Krasniuk

1,1877 silver badges7 bronze badges

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

7 Comments

Dejan Bogatinovski Over a year ago

I am doing this but for some reason it still copies over the original index.html file. I am using the following command to build the angular app: ng build --prod -c production --output-path dist. Do you have any idea why it wouldn't replace the index.html file with index.prod.html ?

Artem Krasniuk Over a year ago

@DejanBogatinovski can you show your configuration for production? (in angular.json)

Artem Krasniuk Over a year ago

@JosephHorsch only the content of index.html will be replaced, not the filename.

Rado Koňuch Over a year ago

@DejanBogatinovski As of angular 8, you can't replace index files via "fileReplacements". You have to specify your own index file via "index" property. Eg.: "index":"src/index.someenv.html".

jcroll Over a year ago

See my answer for Angular 8 and above

|

jcroll · Accepted Answer · 2020-06-02 01:48:37Z

50

This answer supersedes Artyom's answer for Angular 8 and above. Add the following to your angular.json:

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

edited Jun 2, 2020 at 1:48

answered May 30, 2020 at 15:09

jcroll

7,1939 gold badges56 silver badges68 bronze badges

1 Comment

Alex Beardsley Over a year ago

This would also be great to do in a CI build. have index.tokens.html contain MY_PLACEHOLDER. index.html contains the default for local development, and in your pipeline just before your prod build do a replacement of MY_PLACEHOLDER with a pipeline variable. This allows values like environment URLs to be stored in the pipeline and a change to them would be to simply re-run the pipeline for a given commit to generate the file with the new URL instead of needing a code change to have to be promoted through various environments.

0x29A · Accepted Answer · 2019-05-07 09:26:17Z

7

In main.ts file you can use document.write(environment.variable) and it will write what you want in index.html

(I use it to make the Google Analytics script take a dynamic Tracking ID wether it's in development or production mode, and it works well in Angular6)

answered May 7, 2019 at 9:26

0x29A

711 silver badge1 bronze badge

1 Comment

Glenster Over a year ago

Hi, would you have a small example to show how you managed to update your Analytics script Tracking ID in your index.html file? Much appreciated

Arnaud D · Accepted Answer · 2019-10-18 07:47:20Z

6

An example here for document.write(environment.variable) : https://github.com/angular/angular-cli/issues/4451#issuecomment-285026543

import { environment } from './environments/environment';

if (environment.production) {
  document.write('<script type="text/javascript">// ProductionAnalyticsCodeHere</script>');
} else if (environment.staging) {
  document.write('<script type="text/javascript">// StagingAnalyticsCodeHere</script>');
}

answered Oct 18, 2019 at 7:47

Arnaud D

812 silver badges6 bronze badges

1 Comment

Tomas Over a year ago

This one is kinda dangerous, because document.write will replace whole HTML document if invoked after page is being loaded.

44kksharma · Accepted Answer · 2021-04-14 12:07:05Z

6

for me above answers did not work on Angular 10, so I created different folder for staging, production etc and placed the index.html which was used by CLI as per the build environment

{
  "projects": {
    "yourApp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "index": "src/index.html",
          },
          "configurations": {
            "production": {
              "index": "src/production/index.html",
            }
          }
        }
      }
    }
  }
}

answered Apr 14, 2021 at 12:07

44kksharma

2,83029 silver badges33 bronze badges

3 Comments

Lokinder Singh Chauhan Over a year ago

I confirm, This solution worked for me, on angular 13

mcalex Over a year ago

OK, that's weird. I was set to also confirm that jscroll's solution didn't work in Ang 13/14: (Index html generation failed \r\n ENDENT: no such file or directory, open C:\blah\blah\ClientApp\src\index.test.html), but after I successfully followed this solution and then tried it again (just to test/report whether it was the name of the index file or whether it needed to be in its own folder), jscroll's solution started working. Go figure.

Omar Dulaimi Over a year ago

This worked for the default(index.html), but for the dev(index.dev.html), I also had to do mv dist/index.dev.html dist/index.html

Raul Nohea Goodness · Accepted Answer · 2020-10-23 21:22:49Z

Avoid direct access to the document object by injecting DOCUMENT to your AppComponent.

import { DOCUMENT } from '@angular/common';
...
  public constructor(
    @Inject(DOCUMENT) private doc: any
  ) {

Add the tag in ngOnInit()

ngOnInit() {
    this.setYourScriptTag();
}

private function to set it

  private setYourScriptTag() {
    const s = this.doc.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML = `AccountKit.init({
   appId: "${environment.appId}",
   state: "${environment.state}",
   version:"v1.2",
   fbAppEventsEnabled:true,
   debug:true
 });`;
    const head = this.doc.getElementsByTagName('head')[0];
    head.appendChild(s);
  }

This answer is from edodusi

https://github.com/angular/angular-cli/issues/4451#issuecomment-384992203

Piyush Pranjal · Accepted Answer · 2023-11-02 08:22:12Z

2

Angular 16: File replacement approach

"production": {
       "index": "src/index.html",
},
"development": {
       "index": "src/index.development.html",
}

Using two different HTML file

answered Nov 2, 2023 at 8:22

Piyush Pranjal

6159 silver badges16 bronze badges

Comments

T04435 · Accepted Answer · 2018-10-15 03:54:47Z

1

I think you can do it all in main.ts

const env = environment;

 AccountKit.init({
   appId:env.appId,  // this lane
   state:env.state,  // this lane
   version:"v1.2",
   fbAppEventsEnabled:true,
   debug:true
});

Thanks.

edited Oct 15, 2018 at 3:54

answered Oct 15, 2018 at 3:02

T04435

14.3k5 gold badges60 silver badges59 bronze badges

1 Comment

Meliovation Over a year ago

I had a similar issue with loading google charts js and needing to pass the correct api from the environment variables. Moving the initialize call to main.ts worked for me. Of course timing issues are always a concern when loading/initializing scripts so let us know if it works in your scenario.

ZX9 · Accepted Answer · 2019-12-12 00:18:14Z

0

I added this in main.ts:

var html = document.documentElement.innerHTML
document.documentElement.innerHTML = html.replace("Replace me!", environment.variable)

Note that the old value will still exist in index.html for some time while the page is initially loading. (For example, use this to replace the page title and you'll see the old value displayed before the replace happens.)

answered Dec 12, 2019 at 0:18

ZX9

9973 gold badges16 silver badges36 bronze badges

1 Comment

redevill Over a year ago

FWIW: There is an alternate for setting the title that does not suffer from above @ZX9 mentioned latency, per the Angular docs - angular.io/guide/set-document-title.

Igor Litvinovich · Accepted Answer · 2018-08-28 06:57:18Z

-5

import your environment file into .ts file.

import { environment } from '../../environments/environment';

Create required fields in your class, assign values from environment to these variables in the constructor, use usual binding in the .html file.

.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public production = true;
  constructor() {
    this.production = environment.production;
  }
}

.html

<span>{{production}}</span>

answered Aug 28, 2018 at 6:57

Igor Litvinovich

2,51217 silver badges24 bronze badges

1 Comment

Shavareppa Over a year ago

thanks, Igor Litvinovich, but I want to use that env variable in index.html , not in .ts file to that particular html file, i am using angular6. and import not working in index.html file.

Collectives™ on Stack Overflow

How to use environment variable in index.html for Angular 6

10 Answers 10

7 Comments

1 Comment

1 Comment

1 Comment

3 Comments

Comments

Angular 16: File replacement approach

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

7 Comments

1 Comment

1 Comment

1 Comment

3 Comments

Comments

Angular 16: File replacement approach

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related