Separating production and development HTTP URLs using environment.ts file in Angular

Balram Chavan

Configure and build Angular application for different environments

During development of Angular application, we use some mock REST APIs or development specific APIs. Once we are done with development, we would like to point our Angular application to production server APIs.

I have seen many developers switching between development URLs and production URLs by commenting out one on other.

Ideally, Angular application shouldn’t require any code change to point to either development or production server HTTP URL. It should use relative HTTP URLs for consuming REST APIs and base URL which should be kept at only one place so that just by changing base URL, application should point to either development or production server.

That’s where environment.ts files comes into picture. In a Angular-Cli project, we get environment folder with two files

• environment.ts
• environment.prod.ts