"all" budget calculation should not include component styles

[rubiesonthesky]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Budget calculation for "all" is incorrect. It's including component styles in AllCalculator. For example, on my example application Angular reports that the "all" bundle has size 10.627MB when in fact on disk the total size of all javascript and css files is 10.283MB.

I noticed this when calculating stats from stats.json locally. If I patch the AllCalculator to ignore assets that are marked as componentStyle, then the calculation matches what is on the disk. Those assets are not actually on the disk and their code is already included in other assets.

 class AllCalculator extends Calculator {
     calculate() {
         const size = this.assets
-            .filter((asset) => !asset.name.endsWith('.map'))
+            .filter((asset) => !asset.name.endsWith('.map') && !asset.componentStyle)
             .map((asset) => this.getAssetSize(asset))
             .reduce((total, size) => total + size, 0);
         return [{ size, label: 'total' }];

angular-cli/packages/angular/build/src/utils/bundle-calculator.ts

Lines 241 to 250 in 523d539

	class AllCalculator extends Calculator {
	calculate() {
	const size = this.assets
	.filter((asset) => !asset.name.endsWith('.map'))
	.map((asset) => this.getAssetSize(asset))
	.reduce((total: number, size: number) => total + size, 0);
	return [{ size, label: 'total' }];
	}
	}

It would be also nice if the whole build didn't fail when the budget size goes over error threshold. It makes it impossible to update budget values programmatically. :) In Angular 18 & webpack builder, the app was built and there were stats.json even if the budget went over. With Angular 19 & esbuild builder, you don't get the result. :/

Minimal Reproduction

command: ng build --stats-json

Builder used: @angular-devkit/build-angular:application

Exception or Error

Your Environment

Angular CLI: 19.1.6
Node: 22.11.0
Package Manager: npm 11.0.0
OS: darwin arm64

Angular: 19.1.5
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.6 (cli-only)
@angular-devkit/build-angular   19.1.6
@angular-devkit/core            19.1.6 (cli-only)
@angular-devkit/schematics      19.1.6
@angular/cdk                    19.1.3
@angular/cdk-experimental       19.1.3
@angular/cli                    19.1.6
@schematics/angular             19.1.6
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

The assets in output look like this in stats.json, which should be excluded from "all" budget.

    "alert.component-SMKGWBDA.css": {
      "imports": [],
      "inputs": {},
      "bytes": 52,
      "ng-component": true
    },

The test case could be something like

    it('does not exceed the total budget', () => {
      const budgets: BudgetEntry[] = [
        {
          type: BudgetType.All,
          maximumError: '1kb',
        },
      ];
      const stats = {
        chunks: [
          {
            id: 0,
            initial: true,
            names: ['foo'],
            files: ['foo.js', 'bar.css'],
          },
        ],
        assets: [
          {
            name: 'foo.js',
            size: 0.5 * BYTES_IN_KILOBYTE,
          },
          {
            name: 'bar.css',
            size: 0.5 * BYTES_IN_KILOBYTE,
          },
          {
            name: 'bar2.css',
            size: 0.75 * BYTES_IN_KILOBYTE,
            componentStyle: true,
          },
        ],
      };

      const failures = Array.from(checkBudgets(budgets, stats));

      expect(failures).toHaveSize(0);
    });

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}