25

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.

James Skemp
  • 8,018
  • 9
  • 64
  • 107
midowu
  • 937
  • 5
  • 19
  • 40
  • 1
    Does this answer your question? [WARNING in budgets, maximum exceeded for initial](https://stackoverflow.com/questions/53995948/warning-in-budgets-maximum-exceeded-for-initial) – Hoang Subin Jul 26 '21 at 04:56

3 Answers3

67

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
deepakchethan
  • 5,240
  • 1
  • 23
  • 33
11

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

Hoang Subin
  • 6,610
  • 6
  • 37
  • 56
1

You can change the limits set by the framework. To do this, you must edit the angular.json file located at the root of your project.

Look for the block named budgets. The maximumWarning value corresponds to the threshold above which the warning message is displayed. The value maximumError corresponds to the triggering of the error.

"budgets": [
       {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
       }
    ]
Alpha
  • 1,413
  • 3
  • 9
  • 23
mohamed riabi
  • 11
  • 3
  • Welcome to SO! Please take a look at the other answers that were given before. Your approach is mentioned there already. In order to keep the site clear and make it easy to find answers, we try to avoid double answers. – ahuemmer Nov 19 '22 at 10:07