Angular ng build with different "profiles"

Question

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?

Answer 1

For Angular 6+:

Create a file for each profile inside environments folder:

environments/environment.ts
environments/environment.prod1.ts
environments/environment.prod2.ts

And inisde each file put the parameters of corresponding profile:

export const environment = {
  production: true,
  serverUrl: "http://prod1.site.com"
};

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

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

@Injectable()
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