Creating Addtional Environments for an Angular Project

Published on

Update Angular 15

By default when you generate a new application with Angular 15, the schematic will no longer generate environments automatically for you. The CLI does provide a generate option if you still wish to use environments.

To add enironments to your project simply run ng generate environments --project <project-name>. Prior version of Angular used environment.ts as the development environment and environment.prod.ts for production. With Angular 15, it inverses the naming, environment.ts now is the production environment file and environment.development.ts becomes the development environment file.

 

Adding Additional Environments

When developing an application, there are often times where you have multiple deployment environments. You might have a development server you deploy to frequently, a staging server and a production server where all of these have different urls and settings that vary from server to server. By default Angular gives you environment files where you can store these various environment configurations. With a default Angular application, you’re given an environment.ts and an environment.prod.ts file with he first being for development and the later for production. But what if we have additional enviornments that we need configurations for? How do we go about adding those additional environments?

This blog is geared towards setting up environments in an Angular project.

 

Modifying the angular.json File

With a fresh application we can modify our angular.json to handle additional build environments. We can add as many as we need but for this blog we will just be adding a staging environment.

Open up the angular.json file and find the "projects" key at the root level of the object. This contains definitions/configurations for each application/library in our project.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    
  }
}

Within this "projects" object there will be a key for each application/library in our workspace where we can configure each differently. What we are looking for specifically is configuring our environments. You will find the environment configurations at "application-name" -> "architect" -> "build" -> "configurations"

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "application-name-here": {
      "architect": {
        "build": {
          "configurations: {
            ...
          }
        }
      }
    }
  }
}

If you look at the default "configurations" object, you’re given production and development.

The production configuration has a few options sets. One is budgets which define maximum bundle sizes when building for production. The other option is "fileReplacements" which defines file swaps when building for production. For example, for production, whenver we reference our environment.ts file in our code base, during the build process for production that environment.ts file will be swapped/replaced with environment.prod.ts.

So if we want to add an additional environment we can do that here. For the case of our staging environment we’ll have it mirror our production but provide a different environment file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "application-name-here": {
      "architect": {
        "build": {
          "configurations": {
            "staging": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "outputHashing": "all"
            },
          }
        }
      }
    }
  }
}

The staging configuration mirrors our production but simply swaps/replaces environment.ts for environment.staging.ts.

 

Adding Our Additional Environment Files

Now we can create our environment.staging.ts file under src/environments/. In a terminal you can run touch src/environments/environment.staging.ts. In this file we simply just define our environment variables similar to our production and development environments….

export const environment = {
  production: true,
  baseApiEndpoint: '....'
  // Our staging environments configurations here.
};

If we want to build our app for staging, we can now provide that to the build command.

ng build -c staging

This will build our application using the environment.staging.ts file wherever we reference environment.ts in our application.

 

Complete github repo can be found here

comments powered by Disqus