web-dev-qa-db-fra.com

Comment utiliser la variable d'environnement dans index.html pour Angular 6

J'utilise angular6, dans mon projet j'utilise Facebook Account Toolkit à des fins de vérification mobile.

J'ai besoin d'initialiser la boîte à outils du compte dans le fichier index.html à l'aide du code suivant.

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

Le problème est que les valeurs de appId et state changent en fonction de l'environnement (développement/test/production).

Comment puis-je utiliser des variables d'environnement dans index.html fichier.

Veuillez me faire savoir si quelqu'un a une solution pour angular 6.

Merci d'avance.

angular6account-kit
27
Shavareppa

Vous devez créer une copie de index.html et le nommer index.someenv.html. Ensuite, dans votre angular.json dans le remplacement du fichier d'installation de configuration de l'environnement:

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

Le angular cli remplacera ces fichiers lorsque vous exécuterez votre build

38
Artyom Krasnyuk

Dans le fichier main.ts, vous pouvez utiliser document.write(environment.variable) et il écrira ce que vous voulez dans index.html

(Je l'utilise pour que le script Google Analytics prenne un ID de suivi dynamique qu'il soit en mode de développement ou de production, et cela fonctionne bien dans Angular6)

3
0x29A

Un exemple ici pour 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

Je pense que vous pouvez tout faire dans main.ts

const env = environment;

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

Merci.

1
T04435

J'ai ajouté ceci dans main.ts:

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

Notez que l'ancienne valeur existera toujours dans index.html pendant un certain temps pendant le chargement initial de la page. (Par exemple, utilisez-le pour remplacer le titre de la page et vous verrez l'ancienne valeur affichée avant le remplacement.)

0
ZX9