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

Question

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

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

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

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

如何在index.html 文件中使用环境变量。

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

提前致谢。

Answer 1

您应该创建 index.html 的副本并将其命名为 index.someenv.html。 然后在你的 angular.json 中环境配置设置文件替换：

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

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

Answer 2

对于 Angular 8 及更高版本，此答案取代 Artyom's answer。将以下内容添加到您的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

我认为你可以在 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 7

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

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

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

Answer 8

通过将 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 9

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

import { environment } from '../../environments/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>