Angular ng build with different "profiles"

user_999264 0
Viewed 14863

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?

angular-cli angular
4 Answers

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
user_63259940

just an update for people using angular 6 (not sure if available earlier), been looking about for help on this and this kinda done what i needed. In the angular.json file, you could use the configurations to do something like this;

/* ------removed start --------*/
"configurations": {
    "production": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },
    "dev": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev.ts"
        }
      ]
    },
    "test": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.test.ts"
        }
      ]
    }            
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "davinci-service:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "dev": {
      "browserTarget": "app:build:dev"
    },
    "test": {
      "browserTarget": "app:build:test"
    }
  }
},
/* ------removed end --------*/

and run using;

ng serve -c test

user_58473040
Related