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.prod.ts, if we build using env=prod, then prod environments variable will be used. Now I have one question, how can I get environment variable from the code? I googled the doc quite a lot and there is no mention about this. Can anyone help to tell me how to obtain environment variable values? Thanks

Answer 1

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 2

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.

Answer 3

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 4

I was stumbling over the same obstacle when a coworker sent me this link

Basically you define your "secret" in environments/environment.ts and then import environments in the component you want to use it, and then use it as follows (according to the Angular docs)

1. Set it in environments/environment.ts

export const environment = { 
production: false, 
secret: "123456789"     //  <-- your "secret" variable
};

2. Import it into your component

import { environment } from 'src/environments/environment';

3. Use it.

mySecret = environment.secret