Angular Budget Exceeded - Fix in CI

By Daniel Zoghalchali·Latchkey

Angular production builds enforce size budgets. When the initial bundle or a single component stylesheet exceeds its maximumError threshold, the build fails by design.

What this error means

The build fails with Error: bundle initial exceeded maximum budget or anyComponentStyle exceeded maximum budget.

angular

Error: bundle initial exceeded maximum budget.
Budget 500.00 kB was not met by 142.31 kB with a total of 642.31 kB.

Error: anyComponentStyle exceeded maximum budget.

Diagnose it: is it resolution, transform, or memory?

Bundler failures in CI fall into three families and the error text often points at the wrong one. A module that resolves on your machine and not on the runner is nearly always case sensitivity or a missing optional dependency; a transform error is a config or version mismatch; and an unexplained kill with no stack is the out-of-memory reaper, not a build error at all.

Terminal

# 1. resolution: does the file exist with EXACTLY that case?
git ls-files | grep -i "the/imported/path"

# 2. transform: what versions is CI actually resolving?
npm ls webpack vite rollup esbuild typescript 2>/dev/null | head -20

# 3. memory: was it killed rather than failed?
#    exit 137 = SIGKILL (OOM). Nothing in the bundler log will explain it.
node --max-old-space-size=4096 node_modules/.bin/vite build

Common causes

Bundle grew past the budget

New dependencies or eager imports pushed the initial bundle over the configured error threshold.

Oversized component stylesheet

A single component SCSS exceeded the anyComponentStyle budget, often from inlined fonts or large rules.

How to fix it

Reduce the bundle

Lazy-load routes, drop heavy eager imports, and remove unused dependencies.

app.routes.ts

// route config
{ path: 'reports', loadComponent: () => import('./reports/reports.component') }

Adjust budgets deliberately

If the growth is justified, raise the budget in angular.json with intent - do not silence it blindly.

angular.json

// angular.json budgets
{ "type": "initial", "maximumWarning": "600kb", "maximumError": "800kb" }

Make the build reproducible before you debug it

Pin the Node major in setup-node and in engines. A bundler that resolves native bindings will pick a different prebuilt binary across majors.
Delete node_modules locally and reinstall from the lockfile before concluding the runner is at fault; most "works locally" reports are stale local state.
Set CI=true locally to reproduce. Several toolchains change behaviour under it, including treating warnings as errors.
Exit code 137 is an out-of-memory kill. Raise --max-old-space-size or move to a larger runner rather than searching the bundler config.

How to prevent it

Track bundle size in CI so regressions are visible per PR.
Lazy-load feature areas to keep the initial bundle small.

Frequently asked questions

What causes Angular budget exceeded?

There are 2 common causes: bundle grew past the budget and oversized component stylesheet. New dependencies or eager imports pushed the initial bundle over the configured error threshold.

How do I fix Angular budget exceeded?

There are 2 fixes depending on which cause you have: reduce the bundle and adjust budgets deliberately. Work through them in order, since the first is the most common.

What does Angular budget exceeded actually mean?

The build fails with Error: bundle initial exceeded maximum budget or anyComponentStyle exceeded maximum budget.

How do I stop Angular budget exceeded happening again?

Track bundle size in CI so regressions are visible per PR. The prevention section lists 2 changes that keep it from recurring.