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

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

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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 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
});

Благодарю.

Ответ 4

environment.ts - это среда по умолчанию, когда вы не используете specify- env значения переменных файла.

по умолчанию:

export const environment = {
  production: false,
  apiUrl: 'http://example.com/api/',
};

Теперь импортируйте файл app.component.ts следующим образом:

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

Ответ 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>');
}

Ответ 6

импортируйте файл окружения в файл.ts.

import { environment } from '../../environments/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>