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

Answer 2

In every project created with the angular-cli you have an environment.ts and an environment.production.ts file which exports an object with a property of type boolean called production.

In the first file it is set to false and in the production file to true.

The first file is used by default by the angular-cli when calling ng build.

If you want to use the production file you have to call ng build --env=prod.

Use it in a config.ts file

In a config.ts file you can ask the status of the boolean that the environment file exports.

For example:

import { environment } from 'environments/environment';

export class Config {
    public static get webApiUrl() {
        if (environment.production) {
            return 'https://testapi.be';
        }
        return 'http://localhost:60000';
    }
}

Creating your own environment

You can create your own environment file by calling it environment.your_environment.ts.

Then you have to add a boolean property your_environment and also add it to all the other files and only set it to true in your file.

After this you have to add it to the angular-cli.json file in the section environments: "your_environment": "environments/environment.your_environment.ts".

With ng build --env=your_environment you can use the file.

import { environment } from 'environments/environment';

export class Config {
    public static get webApiUrl() {
        if (environment.production) {
            return 'https://productionapi.be';
        }
        if (environment.your_environment) {
            return 'https://testapi.be';
        }
        return 'http://localhost:60000';
    }
}

Answer 3

Assuming that you are using Angular CLI, which comes with webpack. Closest thing I can think of is to define environment in `angular-cli.json config

-Create a public enum with your environments / profiles under folder app

export enum Env {
  Development,
  Acceptance,
  Production
}

This is absolutely unnecessary but helps while working on configurations. We will use this as a profile differentiator

-Create a new environment configuration file called environment.acc.ts and environment.dev.ts under src\environments folder with appropriate configurations

environment.dev.ts -

import { Env } from 'app/env.enum';
export const environment = {
  production: false,
  env: Env.Development
};

environment.acc.ts -

import { Env } from 'app/env.enum';
export const environment = {
  production: false,
  env: Env.Acceptance
};

environment.prod.ts -

import { Env } from 'app/env.enum';
export const environment = {
  production: true,
  env: Env.Production
};

-Update angular-cli.json with the provided configurations.

{
  "project": {
    "version": "1.1.2",
    "name": "angular-app"
  },
  "apps": [
    {
      .
      . //////config removed for sanity//////   
      .
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.dev.ts",
        "prod": "environments/environment.prod.ts",
        "acc": "environments/environment.acc.ts",
      }
    }
  ]
  .
  .
  .
  . //////config removed for sanity//////
}

Now you have environments accesible using environment.env variable throughout your app.

You can write a config that changes according to environment.

Example -

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

export class Config {
    public static get getConfigurationEndpoints() {
        if (environment.env.Production) {
            return 'https://xyz.azurewebsites.net/api';
        }
        else if (environment.env.Acceptance) {
            return 'https://xyzacc.azurewebsites.net/api';
        }
        else {
            return 'http://localhost:8555/api';
        }
    }
}

Now, simply build / serve the app with build parameters like given below

ng serve --environment "acc" ng serve --environment "prod"

Note that this is not the only way of achieving it. However, for our kind of application we preferred this sort of configuration transform method.

Answer 4

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