如何在 Angular 6 的 index.html 中使用环境变量

Question

我正在使用 Angular6，在我的项目中我使用 Facebook Account Toolkit 进行移动验证。

我需要使用以下代码在index.html文件中初始化帐户工具包。

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

问题是，appId和state的值会根据环境（开发/测试/生产）而变化。

如何在

index.html

文件中使用环境变量。

如果有人有 Angular 6 的解决方案，请告诉我。

Answer 1

您应该创建index.html 的副本并将其命名为

index.someenv.html

。 然后在环境配置设置文件中替换 angular.json 中：

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

当您运行构建时，Angular cli 将替换这些文件

UPD：对于 Angular 8+ 使用此：

将以下内容添加到您的 angular.json 中：

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

Answer 2

对于 Angular 8 及以上版本，

此答案取代 Artyom 的答案。将以下内容添加到您的

angular.json

：

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

Answer 3

这里有一个 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>');
}

Answer 4

在 main.ts 文件中，您可以使用

document.write(environment.variable)

，它将在 index.html 中写入您想要的内容

（我用它来让 Google Analytics 脚本采用动态跟踪 ID，无论是在开发模式还是生产模式，并且它在 Angular6 中运行良好）

Answer 5

对我来说，上述答案在 Angular 10 上不起作用，因此我创建了不同的文件夹用于暂存、生产等，并放置了 CLI 根据构建环境使用的 index.html

{
  "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",
            }
          }
        }
      }
    }
  }
}     

Answer 6

通过将 DOCUMENT 注入您的 AppComponent 来避免直接访问文档对象。

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

在ngOnInit()中添加标签

ngOnInit() {
    this.setYourScriptTag();
}

设置它的私有函数

  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);
  }

这个答案来自edodosi

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

Answer 7

我认为你可以在 main.ts 中完成这一切

const env = environment;

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

谢谢。

Answer 8

我在 main.ts 中添加了这个：

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

请注意，在页面初始加载时，旧值仍将存在于 index.html 中一段时间。 （例如，使用它来替换页面标题，您将看到替换发生之前显示的旧值。）

Answer 9

Angular 16：文件替换方法

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

使用两个不同的 HTML 文件

Answer 10

将您的环境文件导入到 .ts 文件中。

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

在类中创建必填字段，将 environment 中的值分配给构造函数中的这些变量，在 .html 文件中使用常规绑定。

.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>