Angular 2+, How to read environment variable in module (webpack)

Question

I don't know how I can read my environment variable. I'm initializing my APP_INITIALIZER here in app.module.browser.ts,

  @NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule,
    AppModuleShared,
    AppAuthModule
  ],
  declarations: [],
  providers: [
    { provide: 'BASE_URL', useFactory: getBaseUrl },
    {
      provide: APP_INITIALIZER, // <-- HERE
      useFactory: configurationServiceFactory,
      deps: [ConfigurationService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor, //AuthInterceptor,
      multi: true
    }
    ConfigurationService,
    ErrorLogService
  ]

After this initialization, I'm having some constant variables. I want to read my environment variable. So I can put this into condition and I can import my module depending my condition like this.

import { AccountsComponent } from "./customerList/components/accounts/accounts.component";
import { AccountsPlusComponent } from "./customerList/components/accounts-plus/accounts-plus.component";

let accountsInjection: any = ENV_VARIABLE ? AccountsComponent : AccountsPlusComponent;

@NgModule({
  declarations: [
    accountsInjection
  ],
  imports: [
...

NOTE: I don't have app/environments/ folder in my project... (I'm still looking a way to put it)

Edit: I also want to give extra information, I'm using WEBPACK, should I use another method to get my Envarionment variables?

Inside src create a folder environments. After that create the two files one with name **environment.prod.ts** and another one with name **environment.ts**. Then you store the variables in a const object called environment which has production key as false and true respectively. Check https://stackoverflow.com/questions/51382142/change-url-from-service-when-build-angular-6-project/51382330#51382330 — kboul, Jul 23 '18 at 12:21
Thanks for your answer. What if I have another environment, like 1.Production 2.Staging 3.StagingPlus, do you have any advice for this ? — rcanpahali, Jul 23 '18 at 12:27
Yes. you create a file called environment.stagingPlus.ts for instance having again production key as false, and then you build it it via ng build --prod -c custom_environment_name — kboul, Jul 23 '18 at 12:30
Possible duplicate of [Where to save global settings in Angular 4](https://stackoverflow.com/questions/44150172/where-to-save-global-settings-in-angular-4) — Amit Chigadani, Jul 23 '18 at 12:38
I've added extra information to topic, please do not ignore. — rcanpahali, Jul 23 '18 at 12:59

Akj · Accepted Answer · 2018-07-23T13:44:45.287

1

In the case if you want to access variable as env.variable_name

Dotenv is a zero-dependency module that loads environment variables.

Install:

npm install dotenv

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:

apiUrl= 'url'
enviorement= 'dev'

in component

require('dotenv').config()

use variables as :

process.env.appUrl,

edited Jul 23 '18 at 13:44

answered Jul 23 '18 at 12:26

Akj

7,038
3
28
40

I've added extra information to topic, please do not ignore. – rcanpahali Jul 23 '18 at 12:59
just create it as src/enviorement/enviorement.ts and src/enviorement/enviorement.prod.ts and export from it. try this if not working i will give you one more solution. – Akj Jul 23 '18 at 13:04
I've created environment.ts, environment.prod.ts, environment.staging.ts and environment.stagingPlus.ts ... How can I manage these files? I'm still looking for a solution to get env.variable from webpack... – rcanpahali Jul 23 '18 at 13:31

score 0 · Answer 2 · answered Jul 23 '18 at 13:53

This is for angular 6. But we can have similar configuration in angular >2 as well . Angular.json

 "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
           },
"test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ]
            }

Similarly for other environments.

Package.json -

  "start": "ng serve --configuration=dev",
    "prod": "ng serve --configuration=prod",
    "test": "ng serve --configuration=test",

In Component -

import { environment } from '/../environments/environment'; // as per your path

//use like

environment.property_name

Angular 2+, How to read environment variable in module (webpack)

NOTE: I don't have app/environments/ folder in my project... (I'm still looking a way to put it)

2 Answers2