Build and Serve Angular apps

Build specific options for Angular apps targeting different environments

Most SPA’s/projects will have different configurations for targeted environments. For e.g., the app will have to make a different API call based on development, staging or production. Angular provides a way to configure the application to introduce build variables for different environment.

How do I do that?

Let’s see how to define variables for different targets:

1. Environment files: One for each target environment.
2. Serve configuration: Modify angular.json for file replacements
3. Script configuration: Add build scripts in package.json

Environment files:

Each of the files in environments folder contains a mix of keys, API urls, values, production environment indicator. Simply a mix of different information in json format. There is no set keynames to be used. You can define your variables in this files. And it can be accessed across the entire application.

The same variables are defined on development, staging, production environment files. Angular by default provides 2 files under environments folder, you can add as many as possible based on your requirement.

src/environments/
           ---environment.ts
           ---environment.dev.ts
           ---environment.stg.ts
           ---environment.prod.ts

Provide file-replacement configurations:

The file angular.json provides a lot of config for both running an app locally and building artifacts for the angular app. We need to narrow in on fileReplacements section. This section is defined under production configurations. This provides a way to replace the right environment file based on the target.

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },

We can add more configurations after the production configurations are complete. Note: Production section has more configurations, bundle size limits etc. Make sure you find the right spot to insert your file replacements for other configurations, as shown below.

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },            
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stg.ts"
                }
              ]
            }            
          }          
        },

Script Configuration:

Last step is to configure the build for the environments in package.json . The file contains section for scripts. The scripts defined here is for build, serve, run e2e, tests, code coverage etc.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",    
    "lint": "ng lint",
    "e2e": "ng e2e",
    "test": "ng test --code-coverage --watch=false"    
  },

Angular framework provides a few default scripts. Now lets add our custom configuration build scripts.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",    
    "build:dev": "ng build --prod --configuration=development --aot,
    "build:staging": "ng build --prod --configuration=staging --aot,
    "build:production": "ng build --prod --aot,
    "lint": "ng lint",
    "e2e": "ng e2e",
    "test": "ng test --code-coverage --watch=false"   
  },

--configuration=development or --configuration=staging provides custom configration tags, this string should match the configurations we added under angular.json .

Usage:

The build configuration settings are especially useful on CI/CD pipelines for different stages of deployment.

In conclusion

You can define different named build configurations for your project, such as development, staging and production, with different defaults. The Angular CLI build, serve, and test commands can then replace files with appropriate versions for your intended target environment.