In angular.json, which budget types can the Angular CLI enforce, and how do maximumWarning, maximumError and baseline decide whether a build fails?

middleshould knowfreq 45%

answer

initial, bundle, any, all
component styles have their own
warning logs, error fails
percentages need a baseline
set per configuration

basics

~10 s

Angular CLI budgets in angular.json have a type (initial, bundle, all, allScript, any, anyScript, anyComponentStyle) and thresholds. Crossing maximumWarning logs a warning; crossing maximumError fails the build. Percentages are relative to a baseline.

solid answer

~50 s

Budgets are an array under a build configuration, normally production. Each entry has a type: initial measures the JavaScript and CSS needed to bootstrap, bundle one named bundle (with name, for example a lazy route), all and allScript the whole output or all scripts, any and anyScript each file or each script, and anyComponentStyle each component stylesheet. Thresholds are maximumWarning, maximumError, minimumWarning, minimumError, or warning and error for both directions, written as bytes, kb, mb or a percentage. A warning is printed; an error fails the build. Percentages are measured relative to baseline, which defaults to 0, so a bundle budget with baseline: "200kb" and maximumError: "20%" fails above 240 kB. ng new in strict mode generates initial at 500kB/1MB and anyComponentStyle at 4kB/8kB. Because they sit in production, ng serve in development never checks them.

Budgets are an array under a build configuration, normally `production`. Each entry has a `type`: `initial` measures the JavaScript and CSS needed to bootstrap, `bundle` one named bundle (with `name`, for example a lazy route), `all` and `allScript` the whole output or all scripts, `any` and `anyScript` each file or each script, and `anyComponentStyle` each component stylesheet. Thresholds are `maximumWarning`, `maximumError`, `minimumWarning`, `minimumError`, or `warning` and `error` for both directions, written as bytes, `kb`, `mb` or a percentage. A warning is printed; an error fails the build. Percentages are measured relative to `baseline`, which defaults to `0`, so a `bundle` budget with `baseline: "200kb"` and `maximumError: "20%"` fails above 240 kB. `ng new` in strict mode generates `initial` at 500kB/1MB and `anyComponentStyle` at 4kB/8kB. Because they sit in `production`, `ng serve` in development never checks them.

code

json · 7 lines

json

{
  "budgets": [
    { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
    { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" },
    { "type": "bundle", "name": "admin", "baseline": "200kb", "maximumWarning": "10%", "maximumError": "20%" }
  ]
}

go deeper

for a junior

Recall that angular.json budgets warn or fail a build when output grows past a limit, and that initial covers the bootstrapping code.

for a middle

Explain every budget type, the warning versus error thresholds, baselines with percentages, and why only configurations that declare budgets check them.

for a senior

Scope budgets to the bundles that matter, including named lazy chunks and lower limits, and make sure every deployable configuration enforces them.

for a principal

Own the budget policy across projects, deciding which limits gate CI and how exceptions are granted without eroding the gate.

Where budgets live

A budget is a size limit that the Angular CLI's application builder checks after bundling. Budgets are configured in angular.json as a budgets array on the build target, almost always inside a configuration such as production:

json

"configurations": {
  "production": {
    "budgets": [
      { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
      { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" },
      { "type": "bundle", "name": "admin", "maximumWarning": "250kb", "maximumError": "300kb" }
    ]
  }
}

The first two entries are what ng new generates when --strict is on, which is the default. With --strict=false the generated thresholds are looser: 2MB/5MB for initial and 6kB/10kB for component styles.

The budget types

`type`	Measures
`initial`	JavaScript and CSS needed to bootstrap the app (the build summary's Initial Total)
`bundle`	one bundle, chosen with `name`, such as a lazy-loaded route's chunk
`all`	the entire application output
`allScript`	all scripts together
`any`	each file separately
`anyScript`	each script separately
`anyComponentStyle`	each component's stylesheet separately

For bundle, name is the bundle name the builder reports, not the emitted file name, so hashes and wildcards do not belong in it.

Thresholds and severity

Each entry can carry:

maximumWarning / maximumError: an upper limit.
minimumWarning / minimumError: a lower limit, useful to catch a bundle that suddenly shrinks because something was accidentally left out.
warning / error: shorthand for the same distance in both directions around the baseline.
baseline: the reference size; defaults to 0.

Values are sizes in bytes (123 or 123b), kb, mb, or a percentage of the baseline (10%). The builder treats a kilobyte as 1,000 bytes and measures the size of the emitted output files, before any server compression.

The outcome:

Within all thresholds: nothing is printed.
Beyond a warning threshold: the build succeeds and prints a warning naming the budget and the overshoot.
Beyond an error threshold: the build fails, so CI stops.

Baselines and percentages

With baseline you express growth rather than absolute size:

json

{ "type": "bundle", "name": "main", "baseline": "200kb", "maximumWarning": "10%", "maximumError": "20%" }

This warns above 220 kB and fails above 240 kB. A percentage without a baseline is a percentage of zero, which puts the threshold at zero bytes so the budget trips on any output, a common misconfiguration. Absolute values are relative to the baseline too: with baseline: "200kb", a maximumError of "50kb" means 250 kB.

Which builds check them

Budgets belong to the configuration that declares them. With the generated layout:

ng build (production by default) checks them;
ng build -c development and ng serve (development) do not;
a new staging configuration does not, unless it repeats the budgets array or is built together with production, as in -c production,staging.

Reading a budget failure

When a limit is crossed, the builder reports the budget's label and the numbers, in the form initial exceeded maximum budget. Budget 1.00 MB was not met by 85.20 kB with a total of 1.09 MB. A lower-limit breach reads failed to meet minimum budget instead. Whether the line appears as a warning or an error depends on which threshold was crossed:

Read the label to see which budget type or bundle tripped.
Compare the total with the build summary to find the file responsible.
Decide whether the growth is intended; if it is, change the budget in the same pull request so the decision is reviewed.

Choosing numbers

How large a budget should be, and whether to count compressed or raw bytes, is a performance-policy question rather than a CLI one. On the CLI side the important habits are to budget initial and the heaviest lazy bundles by name, keep anyComponentStyle so that one component cannot import a whole stylesheet library, and treat an error threshold as a gate that should fail CI.

## Where budgets live A budget is a size limit that the Angular CLI's application builder checks after bundling. Budgets are configured in `angular.json` as a `budgets` array on the `build` target, almost always inside a **configuration** such as `production`: ```json "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }, { "type": "bundle", "name": "admin", "maximumWarning": "250kb", "maximumError": "300kb" } ] } } ``` The first two entries are what `ng new` generates when `--strict` is on, which is the default. With `--strict=false` the generated thresholds are looser: 2MB/5MB for `initial` and 6kB/10kB for component styles. ## The budget types | `type` | Measures | |---|---| | `initial` | JavaScript and CSS needed to bootstrap the app (the build summary's Initial Total) | | `bundle` | one bundle, chosen with `name`, such as a lazy-loaded route's chunk | | `all` | the entire application output | | `allScript` | all scripts together | | `any` | each file separately | | `anyScript` | each script separately | | `anyComponentStyle` | each component's stylesheet separately | For `bundle`, `name` is the bundle name the builder reports, not the emitted file name, so hashes and wildcards do not belong in it. ## Thresholds and severity Each entry can carry: - `maximumWarning` / `maximumError`: an upper limit. - `minimumWarning` / `minimumError`: a lower limit, useful to catch a bundle that suddenly shrinks because something was accidentally left out. - `warning` / `error`: shorthand for the same distance in both directions around the baseline. - `baseline`: the reference size; defaults to `0`. Values are sizes in bytes (`123` or `123b`), `kb`, `mb`, or a **percentage of the baseline** (`10%`). The builder treats a kilobyte as 1,000 bytes and measures the size of the emitted output files, before any server compression. The outcome: 1. Within all thresholds: nothing is printed. 2. Beyond a **warning** threshold: the build succeeds and prints a warning naming the budget and the overshoot. 3. Beyond an **error** threshold: the build **fails**, so CI stops. ## Baselines and percentages With `baseline` you express growth rather than absolute size: ```json { "type": "bundle", "name": "main", "baseline": "200kb", "maximumWarning": "10%", "maximumError": "20%" } ``` This warns above 220 kB and fails above 240 kB. A percentage without a baseline is a percentage of zero, which puts the threshold at zero bytes so the budget trips on any output, a common misconfiguration. Absolute values are relative to the baseline too: with `baseline: "200kb"`, a `maximumError` of `"50kb"` means 250 kB. ## Which builds check them Budgets belong to the configuration that declares them. With the generated layout: - `ng build` (production by default) checks them; - `ng build -c development` and `ng serve` (development) do not; - a new `staging` configuration does not, unless it repeats the `budgets` array or is built together with production, as in `-c production,staging`. ## Reading a budget failure When a limit is crossed, the builder reports the budget's label and the numbers, in the form `initial exceeded maximum budget. Budget 1.00 MB was not met by 85.20 kB with a total of 1.09 MB.` A lower-limit breach reads `failed to meet minimum budget` instead. Whether the line appears as a warning or an error depends on which threshold was crossed: 1. Read the label to see which budget type or bundle tripped. 2. Compare the total with the build summary to find the file responsible. 3. Decide whether the growth is intended; if it is, change the budget in the same pull request so the decision is reviewed. ## Choosing numbers How large a budget should be, and whether to count compressed or raw bytes, is a performance-policy question rather than a CLI one. On the CLI side the important habits are to budget `initial` and the heaviest lazy bundles by name, keep `anyComponentStyle` so that one component cannot import a whole stylesheet library, and treat an error threshold as a gate that should fail CI.

Why would you ever set a minimumError budget?
To catch a bundle that shrinks unexpectedly. If a refactor drops a polyfill or a lazy route stops being included, the output can become suspiciously small; a lower limit turns that into a failed build instead of a silent functional regression.
How do you budget a lazy-loaded route separately from the initial load?
Add an entry with `"type": "bundle"` and `"name"` set to the bundle name the builder reports for that chunk, not the hashed file name. Initial-load limits stay on the `initial` entry, so a heavy admin route cannot hide inside a green initial budget.

saying these in an interview costs you the question

Exceeding maximumWarning fails the build in CI.
Budgets are checked by ng serve during development.
A bundle budget's name should match the hashed output file name.
A percentage threshold works without setting a baseline.
Budgets can only be configured for the initial bundle.

In angular.json, which budget types can the Angular CLI enforce, and how do maximumWarning, maximumError and baseline decide whether a build fails?

§ answer

basics

solid answer

code

§ go deeper

▾level notes4 levels

▾deep dive~3 min

Where budgets live

The budget types

Thresholds and severity

Baselines and percentages

Which builds check them

Reading a budget failure

Choosing numbers

▾common follow-ups2 questions

▾red flags5 flags

Where budgets live

The budget types

Thresholds and severity

Baselines and percentages

Which builds check them

Reading a budget failure

Choosing numbers

answer

go deeper