Angular ng build with different "profiles"


In Maven (Java) there is a possibility to build, for example, a webapp war with different “profiles”, a “profile” indicating for example a URL of a web service to put in a configuration file.
Thus the “test profile” will indicate a URL different from that of the “production profile”.

Is there something similar to profiles for ng build?


For Angular 6+:

Create a file for each profile inside environments folder:


And inisde each file put the parameters of corresponding profile:

export const environment = {
  production: true,
  serverUrl: ""

You can access the parameters iniside your component/service like this:

import {environment} from '../../environments/environment';

export class SomeService {
  SERVER_URL: string = environment.serverUrl;

And add the new profiles environment inside angular.json under configurations:

"configurations": {
  "prod1": { ... },
  "prod2": {
    "fileReplacements": [
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod2.ts"

And finally choose the profile when building the app:

ng build --configuration = prod1

Answered By – Abdennacer Lachiheb

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.