javascript - Set up Angular 6 environment variables from .env - Stack Overflow

admin管理员组

文章数量:1388868

There's an angular 6 project using environment variables from ./project/src/environments/environment.prod.ts

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

The backend for this project also has env variables in a .env file, so a lot of variable duplicate angular env variables. It would be nice to have something like

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

, so I didn't have to duplicate variables.

ie

I'd like to parse variables from a .env file and assign their values to angular env variables during typescript pilation on the server.

How can this be done? Maybe with webpack?

UPDATE

Some clarification. My .env file contains no json. It looks like this:

TEST_VAR=1

UPDATE

Since ng eject is not available for Angular 6, I don't seem to be able to hack into webpack config. Looks like deadend here.

ng eject

Overview

Temporarily disabled.

Ejects your app and output the proper webpack configuration and scripts.

There's an angular 6 project using environment variables from ./project/src/environments/environment.prod.ts

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

The backend for this project also has env variables in a .env file, so a lot of variable duplicate angular env variables. It would be nice to have something like

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

, so I didn't have to duplicate variables.

ie

I'd like to parse variables from a .env file and assign their values to angular env variables during typescript pilation on the server.

How can this be done? Maybe with webpack?

UPDATE

Some clarification. My .env file contains no json. It looks like this:

TEST_VAR=1

UPDATE

Since ng eject is not available for Angular 6, I don't seem to be able to hack into webpack config. Looks like deadend here.

ng eject

Overview

Temporarily disabled.

Ejects your app and output the proper webpack configuration and scripts.

• javascript
• angular
• angular6

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Sep 11, 2018 at 13:21 sr9yarsr9yar 5,32055 gold badges5757 silver badges6262 bronze badges 4

• any solution you have e up with? I am facing this issue as well. – jsdecena Commented Nov 8, 2018 at 14:40
• @jsd Sorry, no. :( I didn't find any "official" solution. Surely we can hack into somewhere, but in a few updates we might get issues as this usually happens. The last idea was to write a little bash script and use it with npm, something like 'sh parse-dot-env.sh && ng build --prod', but we had little time left on the project, we had to move on. If you e up with something, please share ;-) – sr9yar Commented Nov 13, 2018 at 11:10
• I think it should really be built on top of webpack. I had success when the app is served w webpack. – jsdecena Commented Nov 14, 2018 at 12:05
• I just used a JSON file - dev.to/jdgamble555/… – Jonathan Commented Dec 25, 2021 at 23:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This question bees also more and more important, when we want to containerize angular applications.

My research lead me to an idea, where I have to write a little node.js or typescript program, using dotenv for reading .env file and create the environment.ts file at buildtime, before starting ng serve. You can create entries in the package.json like this:

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

and run it with

npm run server

Here is a good explanation with an example typescript file: https://medium./@ferie/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c

You can create a config file and populate in Run-time.

1) create a File(app-config.json) in assets folder with your variables

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

2) create a service (AppConfigService ) to read the file.

@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) Next we need to tell our application to execute the loadAppConfig() method of our service.

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) create a function called "appInitializerFn" to call our service in AppModule (app.module.ts)

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

...

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

5) import environment and use it :example

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/mon/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/');
    }
}

for more information please see: link

If you want to use variables in build time you could use dotenv

As early as possible in your application, require and configure dotenv.

require('dotenv').config()

Create a .env file in the root directory of your project. Add environment-specific variables on new lines in the form of NAME=VALUE. For example:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

本文标签： javascriptSet up Angular 6 environment variables from envStack Overflow