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

angular

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

Best Answer

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.

Related Topic