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