Question

有一个使用来自./project/src/environments/environment.prod.ts的环境变量的angular 6项目。

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

该项目的后端在.env文件中也包含env变量，因此很多变量重复了角度env变量。拥有

这样的东西会很好

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

，所以我不必重复变量。

即

我想在服务器上进行打字稿编译期间从.env文件中解析变量并将其值分配给angular env变量。

这怎么办？也许使用webpack？

更新

一些澄清。我的.env文件不包含json。看起来像这样：

TEST_VAR=1

更新

自ng eject is not available for Angular 6起，我似乎无法破解Webpack配置。看起来像死胡同。

ng弹出

概述

暂时禁用。

弹出您的应用并输出   正确的webpack配置和脚本。

Answer 1

您可以创建一个配置文件并在运行时填充。

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/');
    }
}

有关更多信息，请参见： link

Answer 2

如果您想在构建时使用变量，可以使用dotenv

尽早在应用程序中，要求并配置dotenv。

require('dotenv').config()

在项目的根目录中创建一个.env文件。在新行上以NAME = VALUE的形式添加特定于环境的变量。例如：

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Answer 3

当我们要容器化角度应用程序时，这个问题也变得越来越重要。

我的研究使我想到了一个主意，其中我必须编写一个小小的node.js或打字稿程序，使用dotenv读取.env文件并在构建时创建ng服务之前创建environment.ts文件。您可以像这样在package.json中创建条目：

...
"config": "ts-node set-env.ts",
"server": "npm run config && ng serve"
...

并运行

npm run server

这是一个很好的解释，并带有示例打字稿文件： https://medium.com/@ferie/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c

从.env设置Angular 6环境变量

3 个答案: