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 project 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?

Thank.

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 or ng build
• 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