Установите Angular 6 переменных среды из .env

Question

Есть угловой проект 6, использующий переменные окружения от ./project/src/environments/environment.prod.ts

export const environment = {
  production: true,
  testVar: 'gg',
};

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

export const environment = {
  production: true,
  testVar: process.env.TEST_VAR
};

, поэтому мне не пришлось дублировать переменные.

т.е.

Я бы хотел проанализировать переменные из файла .env и присвоить их значения угловым переменным env во время компиляции машинописи на сервере.

Как это можно сделать? Может быть, с веб-пакетом?

UPDATE

Некоторые уточнения. Мой файл .env не содержит JSON. Это выглядит так:

TEST_VAR=1

UPDATE

Так как ng eject недоступен для Angular 6 , я не могу взломать конфигурацию webpack. Выглядит как deadend здесь.

нг извлечение

Обзор

Временно отключен.

Извлекает ваше приложение и выводит правильная конфигурация веб-пакета и сценарии.

Answer 1

Если вы хотите использовать переменные во время сборки, вы можете использовать dotenv

Как можно раньше в вашем приложении, требуйте и настраивайте dotenv.

require('dotenv').config()

Создайте файл .env в корневом каталоге вашего проекта. Добавьте переменные среды в новых строках в виде NAME = VALUE. Например:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Answer 2

Вы можете создать файл конфигурации и заполнить его во время выполнения.

1) создайте файл (app-config.json) в папке активов с вашими переменными

{ "servicesUrl": "https://localhost:8080/api"}

2) создайте сервис (AppConfigService) для чтения файла.

@Injectable()
    export class AppConfigService {
        private appConfig;

        constructor (private injector: Injector) { }

        loadAppConfig() {
            let http = this.injector.get(HttpClient);

            return http.get('/assets/app-config.json')
            .toPromise()
            .then(data => {
                this.appConfig = data;
            })
        }

        get config() {
            return this.appConfig;
        }

3) Далее нам нужно указать нашему приложению выполнить метод loadAppConfig () нашего сервиса.

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppConfigService } from './services/app-config.service';

@NgModule({
   ...,
    providers: [
        AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFn,
            multi: true,
            deps: [AppConfigService]
        }
    ],
    ...
})
export class AppModule { } 

4) создайте функцию под названием appInitializerFn для вызова нашего сервиса в AppModule (app.module.ts)

const appInitializerFn = (appConfig: AppConfigService) => {
    return () => {
        return appConfig.loadAppConfig();
    }
};

...

@NgModule({
    ...
})
export class AppModule {}

5) импортировать среду и использовать ее: пример

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppConfigService } from './services/app-config.service';

@Injectable()
export class DataContextService {
    basePath: string;

    constructor (private environment: AppConfigService, private http: HttpClient) {
        this.basePath = environment.config.servicesBasePath;
    }

    getNames() {
        return this.http.get(this.basePath + '/names/');
    }
}

для получения дополнительной информации смотрите: ссылка