Как использовать переменную окружения в index.html для Angular 6 - PullRequest
Новая
       15

Как использовать переменную окружения в index.html для Angular 6

0 голосов
/ 28 августа 2018

Я использую angular6, в своем проекте я использую Facebook Account Toolkit для мобильной проверки.

Мне нужно инициализировать инструментарий учетной записи в файле index.html, используя следующий код. 

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

Проблема в том, что значения appId и состояния меняются в зависимости от среды (разработка / тестирование / производство).

Как использовать переменные среды в index.html файле.

Пожалуйста, дайте мне знать, если у кого-нибудь есть решение для углового 6.

Заранее спасибо.

Ответы [ 4 ]

0 голосов
/ 07 мая 2019

В файле main.ts вы можете использовать document.write(environment.variable), и он напишет, что вы хотите в index.html

(я использую его, чтобы скрипт Google Analytics принимал динамический идентификатор отслеживания, находится ли он в разработке или в рабочем режиме, и он хорошо работает в Angular6)

0 голосов
/ 17 сентября 2018

Вы должны создать копию index.html и назвать ее index.someenv.html, Чем в вашем angular.json в настройке конфигурации файла замены файла: 

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

И Angular Cli заменит эти файлы, когда вы запустите сборку

0 голосов
/ 15 октября 2018

Я думаю, вы можете сделать все это в main.ts 

const env = environment;

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

Спасибо.

0 голосов
/ 28 августа 2018

импортировать файл вашей среды в файл .ts. 

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

Создайте обязательные поля в своем классе, присвойте значения из 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>
...