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

我使用angular6，在我的项目中，我使用Facebook帐户工具包进行移动验证

我需要使用以下代码在index.html文件中初始化AccountToolkit

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

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

如何在

index.html

文件中使用环境变量

请让我知道，如果有人有一个角度6的解决方案

---

提前感谢。

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

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

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

.ts

.html

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

{{production}

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

index.someenv.html

。 然后在angular.json in-environment配置设置文件替换中：

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

---

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

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

const env = environment;

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

---

谢谢。

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

document.write（environment.variable）

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

---

（我使用它使Google Analytics脚本在开发或生产模式下都采用动态跟踪ID，并且在Angular6中运行良好）

这里是document.write（environment.variable）的示例：

从“/environments/environment”导入{environment}；
if（环境、生产）{
write（'//ProductionAnalyticCodehere'）；
}else if（environment.staging）{
write（'//StagingAnalyticsCodeHere'）；
}

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

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

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

此答案将取代Angular 8及以上的答案。将以下内容添加到

angular.json

：

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

---

通过将文档注入AppComponent，避免直接访问文档对象

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

在ngOnInit（）中添加标记

私有函数来设置它

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

这个答案来自江户都

---

对于我来说，上述答案在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",
            }
          }
        }
      }
    }
  }
}     

---

谢谢，Igor Litvinovich，但我想在index.html中使用env变量，而不是在.ts文件中使用该特定html文件，我使用的是angular6。我在加载google charts js时遇到了类似的问题，需要从环境变量传递正确的api。将初始化调用移动到main.ts对我来说很有效。当然，在加载/初始化脚本时，时间问题始终是一个问题，因此请让我们知道它是否在您的场景中起作用。您好，您是否有一个小示例来说明如何在index.html文件中更新分析脚本跟踪ID？非常感谢我正在这样做，但由于某些原因，它仍然会复制原始index.html文件。我正在使用以下命令构建angular应用程序：

ng build--prod-c production--output path dist

。你知道为什么它不会用index.prod.html替换index.html文件吗？@DejanBogatinovski你能展示你的产品配置吗？（在angular.json中）@JosephHorsch将只替换index.html的内容，而不是文件名。@DejanBogatinovski从angular 8开始，您不能通过

“fileReplacements”

替换索引文件。您必须通过

“index”

属性指定自己的索引文件。例如：

“index”：“src/index.someenv.html”

。请参阅Angular 8及以上版本。这一版本有点危险，因为在加载页面后调用

document.write

将替换整个html文档。FWIW：有一种替代设置标题的方法，它不会受到上述@ZX9延迟的影响，根据Angular docs-。在CI构建中这样做也很好。让index.tokens.html包含MY_占位符。index.html包含本地开发的默认值，并且在prod构建之前的管道中，使用管道变量替换MY_占位符。这允许像环境URL这样的值存储在管道中，对它们的更改将是简单地为给定的提交重新运行管道，以生成具有新URL的文件，而不需要通过各种环境升级代码更改。

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

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