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

Question

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

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

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

问题是，appId 和 state 的值会根据环境 (development/test/production) 而变化。

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

如果有人对 angular 6.

有解决方案，请告诉我

提前致谢。

Answer 1

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

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

在 class 中创建必填字段，将 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>

Answer 2

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

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

当您运行您的构建

时，angular cli 将替换这些文件

Answer 3

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

在 main.ts 文件中你可以使用 document.write(environment.variable) 它会在 index.html 中写入你想要的内容

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

Answer 5

此处为 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 6

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

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

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

Answer 7

对于 Angular 8 及更高版本，此答案取代。将以下内容添加到您的 angular.json：

"production": {
  "index": {
    "input": "src/index.someenv.html",
    "output": "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);
  }

此回答来自edodusi

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

Answer 9

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

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

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

account-kit

angular6