Sharing Top Content from the Angular-sphere.

How to manage different environments with Angular CLI?

  • For instance, here is how you would run a build for production: – ng build –env=prodThe prod flag in the above code refers to the prod property of the environments section of .
  • For instance, if you need a QA build option, just add the following entry { – “dev”: “prod”: “qa”: you have to create the actual file environment.qa.ts in the environments directory.
  • export const environment = { – production: false – };The above environment object is where you would add any environment specific property.
  • For instance, let’s add a server URL: – export const environment = { – production: false, – serverUrl: all you have to do to provide a different URL for QA is to define that same property with the right value in environment.qa.ts: – export const environment = { – production:…
  • Easy enough, all you have to do is import the environment object as follows: – import {environment} from class AuthService { – – LOGIN_URL: string = environment.serverUrl + ‘/login’ ;Then when you run a build for QA, Angular CLI is going to use environment.qa.ts to read the environment.serverUrl property value…

Most web applications require to run in different environments before they make their way to production. You might need a build for your QA team to perform some tests, or a specific build to run on…

How to manage different environments with Angular CLI?

Most web applications require to run in different environments before they make their way to production. You might need a build for your QA team to perform some tests, or a specific build to run on your continuous integration server for instance.

All of these builds will likely require a different config: Different server URLs, different logging options, etc.

Angular CLI offers an environment feature that allows to run builds targeted at specific environments. For instance, here is how you would run a build for production:

ng build –env=prod

The prod flag in the above code refers to the prod property of the environments section of .angular-cli.json, which has two options by default: dev and prod:

“environments”: {

“dev”: “environments/environment.ts”,

“prod”: “environments/environment.prod.ts”

You can add as many environments you need here. For instance, if you need a QA build option, just add the following entry in .angular-cli.json:

“environments”: {

“dev”: “environments/environment.ts”,

“prod”: “environments/environment.prod.ts”,

“qa”: “environments/environment.qa.ts”

Then you have to create the actual file environment.qa.ts in the environments directory.

Here is what the default environment.ts file for dev looks like:

// The file contents for the current environment will overwrite these during build.

// The build system defaults to the dev environment which uses `environment.ts`, but if you do

//…

How to manage different environments with Angular CLI?