Configure Angular Build Targets For Local, Dev, Stage and Prod

“Alternate configurations” can be created by passing a “target” name to a
--configuration flag.

This article is part of a series on customizing Angular builds.

1. Configure Angular’s Build System For Local, Dev, Stage and Prod
2. Favicons for Each Environment
3. Your App’s Git Branch In the Title (per env.)

customize angular build environments with the --configuration flag

Add dev, stage and prod commands to your package.json.

"scripts": {
    ...
    "start": "ng serve", <-- local build
    "start:dev": "ng serve --configuration dev",
    "start:stage": "ng serve --configuration stage",
    "start:prod": "ng serve --configuration prod",
    "build:dev": "ng build --configuration dev",
    "build:stage": "ng build --configuration stage",
    "build:prod": "ng build --configuration prod",
    ...

Now we’ll setup each one of these build target configurations within the angular.json config.

"architect": {
  "build": {
    "configurations": {
      "dev": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          }
        ],
        ...
      },
      "stage": {
        ...
      },
      "prod": {
        ...
      }

The configuration above demonstrates that the dev build target fileReplacements array uses environment.dev.ts app-wide, instead of the vanilla environment.ts.

Hint: Look through the docs for more helpful and even complex options.

Add the other build targets stage and prod just like we did with dev above.

One more update to the angular.json file.

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "app-name:build" <-- default and local
    },
    "configurations": {
        "dev": {
            "browserTarget": "app-name:build:dev"
        },
        "stage": {
            "browserTarget": "app-name:build:stage"
        },
        "prod": {
            "browserTarget": "app-name:build:prod"
        }
    }
},

So now when we run a serve command we can specify which build system it will use.

Within any Angular file for our app we can:

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

Now the target build we run will apply the appropriate environment file!

npm run start <-- environments/environment.ts active
npm run start:dev <-- environments/environment.dev.ts active
npm run start:stage <-- environments/environment.stage.ts active
npm run start:prod <-- environments/environment.prod.ts active

See the Angular doc on this subject and build target configurations.