Angular - Configure application environments

You might have deployed the Angular application on different environments like staging, production etc. Each environment will need specific default configuration settings. These default settings may apply to the various builder target like build, serve and test.

The Angular CLI build, serve, and test commands can then replace the default file with the environment-specific file depending on the configuration name provided in the command argument.

Configure default values for specific environment

Each angular project contains src/environments/ folder, which contains the base configuration file, environment.ts. It provides the default environment settings. You can add additional environment files, such as production and staging, with settings specific to the intended environment.

For example:

myProject/src/environments
	environment.ts
	environment.prod.ts
	environment.staging.ts

The base file environment.ts, contains the default environment settings. For example:

export const environment = {
  production: false
};

The build command uses this file (environment.ts) as the build target when no environment is specified in the argument. You can add further variables as additional properties on the environment object.

For example, the following adds a new variable (apiUrl) to the default environment:

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url-default'
};

You can add more configuration files, such as environment.prod.ts. The following shows the default values for production build target:

export const environment = {
  production: true,
  apiUrl: 'http://my-api-url-production'
};

Using environment-specific variables in your app

For example you have following applicaton structure to configure build targets for production and staging environments.

src
	app
		app.component.html
		app.component.ts
	environments
		environment.ts
		environment.prod.ts
		environment.staging.ts

To use the environment configurations, your components need to import the original environments file:

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

This ensures that the applicaiton can find the configurations for specific build targets (environments) which you provided through build and serve commands. Note that, if you do not provide any environment in the command, then the default environment configuration will be used.

The following code in the component file (app.component.ts) uses the environment object with variables (production and apiUrl) defined in the configuration files above.

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs 'false' for default environment
    console.log(environment.apiUrl); // Logs 'http://my-api-url-default' for default environment
  }
  title = 'app works!';
}

References:

• Angular - Configuring application environments

Angular - Initial exceeded maximum budget

While deploying my Angular 11 project for production, I built the project with --prod.

ng build --prod

And I received the error message:

Error: budgets: initial exceeded maximum budget. 
Budget 6.00 MB was not met by 418.81 kB with a total of 6.41 MB.

To work around this error, first lets understand how budget is defined in Angular.

We can describe our Angular application as a set of compiled JavaScript files called bundles which are generated by the build process. Angular budgets allows us to configure expected sizes of these bundles. We can configure thresholds for conditions when we want to notify as warning or fail build with an error if the bundle size gets exceeded that limit.

As per Offical documentation:

As applications grow in functionality, they also grow in size. The CLI lets you set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.

You can specify size budgets for the entire app, and for particular parts.

To set the budget custom limit, open angular.json file and find budgets keyword.

It should look like:

    "budgets": [
       {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
       }
    ]

You can increase the maximumWarning value to prevent the warning, or maximumError value to change the limit for failed error message, i.e.:

    "budgets": [
       {
          "type": "initial",
          "maximumWarning": "4mb",
          "maximumError": "6mb"
       }
    ]

References:

• Angular - Configuring size budgets