Angular "anyComponentStyle exceeded maximum budget" in CI

The anyComponentStyle budget in angular.json caps the size of any single component stylesheet. When one component SCSS file compiles to more than the maximumError size, the production build fails in CI.

What this error means

ng build production fails with "Error: X.component.css exceeded maximum budget. Budget 4.00 kB was not met" naming a specific component stylesheet.

Error: src/app/dashboard/dashboard.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 2.31 kB with a total of 6.31 kB.

Common causes

A component stylesheet grew past the per-file cap

The anyComponentStyle budget applies to each component style bundle individually; a large SCSS import or inlined framework CSS pushes one file over the limit.

Importing a whole CSS framework into one component

Pulling an entire library stylesheet into a single component instead of the global styles counts fully against that component budget.

How to fix it

Move shared styles to global styles or raise the budget

1. Identify the component named in the error.
2. Move framework or shared CSS into the global styles array rather than a component stylesheet.
3. If the size is intentional, raise the anyComponentStyle maximumError in angular.json.

{
  "type": "anyComponentStyle",
  "maximumWarning": "4kb",
  "maximumError": "8kb"
}

Split large component styles

Break a monolithic component stylesheet into smaller pieces or extract shared rules so no single file exceeds the cap.

How to prevent it

• Keep framework CSS in global styles, not per-component.
• Review component stylesheet size in code review.
• Set the anyComponentStyle budget to a value your components actually respect.

Related guides