How to manage multiple environments with angular-cli? (Angular 2 to 5)

Having multiple environments are mandatory in software development workflow. A team behind Angular-CLI handled this for you. Yes, Angular comes with a dev and prod environment configured by default. You can add as many custom environments as you need. Here, will see how to add custom environments like qa, staging and etc…

Adding multiple environments:

Open your angular project in a preferred IDE. Navigate to src>environments, there you can see two files environment.ts and environment.prod.ts. Yes this is the place, where you can add more custom environments. But you should follow below naming convention for the files you create.

environment.<envName>.ts (eg: environment.staging.ts)

Once you added the file under environments, make a entry in .angular-cli.json as shown in the below screenshot.

.angular-cli.json

Define the variables in the required environment files, to make use of those in the future with the same name on all environments.

Using environment:

auth.service.ts

Now you have multiple environments, but you don’t need to import (or) use all files inside your application.

As shown in the above screenshot, only import the environment file wherever you need.

Serving locally:

To serve the application locally with different environment, follow below command

ng serve --env=<envName> (eg: ng serve --env=prod)

Build an application:

To build the application with different environment, follow below command

ng build --prod --env=<envName> (eg: ng build --prod --env=dev)

likewise you can use ng build --prod --env=staging and qa, dev, prod, etc. To take build (or) deploy the application docker configuration and etc…

Hope the information helps you! Thanks for your time.