Angular - Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 197.06 kB with a total of 5.19 MB

Question

When I was building my Angular-12 peroject I got this error:

Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 197.06 kB with a total of 5.19 MB

My angular.json:

          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "4mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }

Yet I still have the error:

How do I resolve this?

Thanks

Answer 1

Your budget is 5MB but your bundle size is greater than that (5.19MB) which is causing this error. You need to increase your maximumError budget in you angular.json as follows:

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

You can also follow few techniques to reduce the bundle sizes as much as possible:

• Use ng build --prod --build-optimizer. For newer versions, this is done by default with ng build --prod
• Use module lazy loading and modularize your application as much as possible.
• You can also use Ivy rendering engine it offers better bundle sizes
• Make sure your 3rd party dependenciess are tree shakeable.
• Use 3rd party tools like webpack-bundle-analyzer to see what is causing bloat in your modules
• You can also check if you files are gzipped or not

Answer 2

I think you need to define your size boundaries in the CLI configuration file, angular.json.

{
  ...
  "configurations": {
    "production": {
      ...
      budgets: [
        {
          "type": "initial",
          "maximumWarning": "4mb",
          "maximumError": "5mb" // <==== change this number because your app is 5.19 MB now.
        }
      ]
    }
  }
}

Reference: https://angular.io/guide/build#configure-size-budgets