Angular environments

The next explanations are based on this project

Angular applications can be launched in multiple environments. Most commons are development and production. When we want to launch our application in the development environment we have to type on our console:

ng serve

ng serve --configuration=development

If we want to launch it in the production environment we can do it in two ways:

ng build

ng build --configuration=production

Angular offers us the customizable scripts object in the package.json file. We can execute previously commented commands running others shorter. When we execute these commands placed in the package.json file, angular looks into the angular.json file to know what has to do with each command.

// This is package.json file
{
  "name": "application-environment",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:prod": "ng serve --configuration=production",
    "build:serve:prod": "ng build --configuration=production; http-server -p 4200 ./dist/application-environment",
    "build:serve:pre": "ng build --configuration=preproduction; http-server -p 4200 ./dist/application-environment",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
...

So let's start with npm run start. On the above piece of code, we see that npm run start executes the command ng serve.

// This is the angular.json file
...
"architect": {
        ...
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "application-environment:build:production"
            },
            "development": {
              "browserTarget": "application-environment:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
...

The builder property targets a development server that provides live reloading. We have two configurations: production and development. Each one has a browserTarget property that points to the architect/build/configurations property of the angular.json file. The default configuration is development so this will be the configuration used. We can use the production configuration by changing the defaultConfiguration property to production or by using the package.json command npm run build:serve:prod.

Next is the architect property of the angular.json file:

// This is angular.json file
...
"architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              ...
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "preproduction": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.pre.ts"
                }
              ],
              ...
            }
          },
          "defaultConfiguration": "production"
        },

When we select the development environment, there is no fileReplacements property in its configuration so by default angular will take the enviroments.ts file located at src/enviroments folder and launch the development server. If we launch the application with production configuration, the command will find the fileReplacements property and instead of using the default environment file it will use the enviroment.prod.ts file.

// This is enviroment.ts file
export const environment = {
  type: "DEVELOPMENT",
  url: "https://swapi.dev/api/people/1"
};

// This is enviroment.prod.ts file
export const environment = {
  type: "PRODUCTION",
  url: "https://swapi.dev/api/people/2"
};

Now if we analyze "npm run build:serve:prod" we see that it executes the command "ng build --configuration=production; http-server -p 4200 ./dist/application-environment". These are two separate commands that will be executed one after each other. The first to execute is "ng build --configuration=production". As with the "npm run start" command let's look into the angular.json file to know what this command does:

// This is angular.json file
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          },
          "configurations": {
            "production": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "preproduction": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.pre.ts"
                }
              ],
              ...
            }
          },
          "defaultConfiguration": "production"
        },
...

Now instead of looking into the serve property, we look into the build property. In this case the builder property targets [the browser value](Build an Angular application targeting a browser environment) that builds an Angular application targeting a browser environment. As we used the --configuration=production, production will be the configuration used from the angular.json file, and as we see there will be a file replacement with the environment.prod.ts file. The same would occur if we use the --configuration=preproduction but angular would replace the default file with environment.pre.ts file.

The second part of the command is "http-server -p 4200 ./dist/application-environment". This serves the built application in a development server.

Next are some different results depending on the command executed, try yourself: