web-dev-qa-db-ja.com

Angular 6のindex.htmlで環境変数を使用する方法

私は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.の解決策があるかどうかをお知らせください。

前もって感謝します。

angular6account-kit
27
Shavareppa

Index.htmlのコピーを作成し、index.someenv.html。次に、環境設定のセットアップファイルの置き換えで、angular.jsonで：

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

angular cliは、ビルドを実行するとこれらのファイルを置き換えます

38
Artyom Krasnyuk

Main.tsファイルでdocument.write(environment.variable)を使用すると、必要なものがindex.htmlに書き込まれます

（私はそれを使用して、Google Analyticsスクリプトが開発モードでも本番モードでも動的トラッキングIDを取得し、Angular6でうまく機能します）

3
0x29A

Document.write（environment.variable）の例： https://github.com/angular/angular-cli/issues/4451#issuecomment-28502654

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>');
}
1
Arnaud D

Main.tsですべてできると思います

const env = environment;

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

ありがとう。

1
T04435

私はこれをmain.tsに追加しました：

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

ページが最初にロードされている間、古い値はしばらくの間index.htmlに存在することに注意してください。 （たとえば、これを使用してページタイトルを置き換えると、置き換えが行われる前に古い値が表示されます。）

0
ZX9