how can we use environment variable in angular version >=2

Question

I am now reading the angular4 doc, and noticed, there is one folder, environments, and under which, there are multiple environment files, such as environment.ts, environment

Answer 1

Assuming the environment.ts file exports, for example, a constant named environment, then first you import the constant (using the appropriate path):

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

Then in code you just use the constant:

let mything = environment.mything;

Answer 2

If you are using CLI then in .angular-cli.json file, place this code. (From angular 6 onward, .angular-cli.json file is renamed to .angular.json)

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

In dev environment file, you can write

export const environment = {
production: false,
url: 'http://something.com'
};

And in prod environment file, you can write

export const environment = {
production: true,
url: 'http://something.com'
}

In components or services, you can use like

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

You can command:

ng serve --dev     // Or 
ng serve --prod

Note: you should have environments directory directly in app directory and both environment files should be there.

Answer 3

Check out envsub for an easy way to build your configuration file src/environments/environment.ts by substituting environment variables into a handlebars template file src/environments/environment.hbs using a package called envsub.

Make sure to delete the environments key from .angular-cli.json.

As an example, the content of src/environments/environment.hbs could be something like:

export const environment = {
    production: ${ MYAPP_PRODUCTION }
};

To substitute MYAPP_PRODUCTION with false run the following from the terminal.

MYAPP_PRODUCTION=false envsub src/environments/environment.hbs src/environments/environment.ts

The resulting file src/environments/environment.ts will be

export const environment = {
    production: false
};

You can add an additional script to package.json to build your configuration file.

"scripts": {
    "config": "envsub src/environments/environment.hbs src/environments/environment.ts",
}

Build your configuration by running something like the following in your terminal:

MYVAR=test npm run config

Remember to exclude src/environments/environment.ts from version control. For git you can use a .gitignore file.