Access system variable (Environment Variable) while building Angular 2 application

Question

I need to build my Angular application using one system variable.

System Variable

server_url = http://google.com

My Environment.ts file look like

export const environment = {
  production: false,
  serveUrl: 'http://someurl.com',
  mleServerUrl: 'http://someurl2.com',
  botServerUrl: 'http://someurl2.com',
  DEBUG_LOG: true,
  azureAD: true,
  mleEnvironment: 'dev',
  multtenant: true,
  e2eTest: false
};

I need to replace serveUrl value with http://google.com while executing ng build command.

If it needs to be set at build time, just create a npm script that retrieves the environment variable and repalces the value in the environment file before running ng build? — David
– David, Commented Feb 22, 2018 at 18:37

Gwen · Accepted Answer · 2018-02-22 16:56:43Z

1

You need a environment.prod.ts (in the same folder as environment.ts) with

export const environment = {
  production: true,
  serveUrl: 'http://google.com',
};

then you have to do a ng build --prod

See https://github.com/angular/angular-cli/wiki/build

answered Feb 22, 2018 at 16:56

Gwen

4742 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Abhishek Over a year ago

the requirement is such there can be N number of different URL on different machine. So need to access system variable only.

Gwen Over a year ago

There's no N number of URLs, if you do that you'll get serveUrl that is equal "someurl.com" in development serveUrl that is equal "google.com" in production In your code you can access it with environment.serveUrl I'm not sure I understand your problem, but I feel like that's what you wanted to do.

Abhishek Over a year ago

Let’s take another example of three person A,B,C where A is fond of using google.com and B likes to use yahoo.com and C like bing.com. Assume that they all have that url in the system variables called server_url. Now while building angular application on these three machine it will read the server_url from these machines and put that value in environment.ts file and use it.

Abhishek Over a year ago

It will be like building the angular application based on system variables. Now you can totally assume that system variable will always be there.

Gwen Over a year ago

the browser cannot read the system variables, you will have to set it during the build. I'm not sure if this is possible with angular-cli. See stackoverflow.com/a/45889613/9136781 maybe, it can help you.

|

henry74 · Accepted Answer · 2019-02-14 16:22:47Z

0

If you want to use system environment variables instead of the standard angular approach here are a few options:

Create a env service that is available through your Angular app; leverages a env.js file which can be modified at deploy time. https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/
Modify your webpack process with a custom angular build which allows you to read system environment variables at build time https://blog.usejournal.com/system-environment-variables-in-angular-1f4a922c7b4c

answered Feb 14, 2019 at 16:22

henry74

1,0531 gold badge11 silver badges14 bronze badges

Collectives™ on Stack Overflow

Access system variable (Environment Variable) while building Angular 2 application

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related