How to use environment variable in index.html for Angular 6
Angular6Account KitAngular6 Problem Overview
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.
Thanks in advance.
Angular6 Solutions
Solution 1 - Angular6
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
Solution 2 - Angular6
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"
},
},
Solution 3 - Angular6
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>');
}
Solution 4 - Angular6
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)
Solution 5 - Angular6
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",
}
}
}
}
}
}
}
Solution 6 - Angular6
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.
Solution 7 - Angular6
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.)
Solution 8 - Angular6
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
Solution 9 - Angular6
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>