File name `undefined` when budget errors in Angular 18.1.0

[squelix]

Command

build

Is this a regression?

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

The previous version in which this bug was not present was

v18.0.7

Description

Since I've updated from Angular 18.0.7 to 18.1.0, when, I'm building my application ng build, I have some errors in the console on the budget but when the error is in a componentStyle which is inlined in the component the name of the file is undefined.

Minimal Reproduction

I'm running ng build in production mode.

My packages:

    "@angular/animations": "~18.1.0",
    "@angular/cdk": "~18.1.0",
    "@angular/common": "~18.1.0",
    "@angular/compiler": "~18.1.0",
    "@angular/core": "~18.1.0",
    "@angular/forms": "~18.1.0",
    "@angular/localize": "~18.1.0",
    "@angular/material": "~18.1.0",
    "@angular/platform-browser": "~18.1.0",
    "@angular/platform-browser-dynamic": "~18.1.0",
    "@angular/platform-server": "~18.1.0",
    "@angular/router": "~18.1.0",
    "@angular/ssr": "~18.1.0",

I didn't change my code, I only updated Angular to 18.1.0.

Exception or Error

▲ [WARNING] src/app/domains/services/drive/player/correction/correction.component.scss exceeded maximum budget. Budget 2.05 kB was not met by 263 bytes with a total of 2.31 kB.

▲ [WARNING] undefined exceeded maximum budget. Budget 2.05 kB was not met by 3.40 kB with a total of 5.44 kB.

▲ [WARNING] undefined exceeded maximum budget. Budget 2.05 kB was not met by 5.14 kB with a total of 7.18 kB.

▲ [WARNING] undefined exceeded maximum budget. Budget 2.05 kB was not met by 5.67 kB with a total of 7.72 kB.

✘ [ERROR] bundle initial exceeded maximum budget. Budget 1.05 MB was not met by 1.01 MB with a total of 2.06 MB.

✘ [ERROR] undefined exceeded maximum budget. Budget 6.14 kB was not met by 76 bytes with a total of 6.22 kB.

✘ [ERROR] undefined exceeded maximum budget. Budget 6.14 kB was not met by 169 bytes with a total of 6.31 kB.

Your Environment

Angular CLI: 18.1.0
Node: 22.3.0
Package Manager: yarn 4.3.1
OS: darwin x64

Angular: 18.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, platform-server, router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.0
@angular-devkit/build-angular   18.1.0
@angular-devkit/core            18.1.0
@angular-devkit/schematics      18.1.0
@schematics/angular             18.1.0
rxjs                            7.8.1
typescript                      5.5.3
webpack                         5.91.0
zone.js                         0.14.7

Anything else relevant?

No response

[alan-agius4]

@squelix, can you please share your budgets config?

[squelix]

This is my budgets config:

            "budgets": [
              {
                "type": "initial",
                "baseline": "1mb",
                "maximumWarning": "500kb",
                "maximumError": "1.5mb"
              },
              {
                "type": "bundle",
                "name": "polyfills",
                "baseline": "150kb",
                "maximumWarning": "50kb",
                "maximumError": "100kb"
              },
              {
                "type": "bundle",
                "name": "styles",
                "baseline": "280kb",
                "maximumWarning": "100kb",
                "maximumError": "200kb"
              },
              {
                "type": "bundle",
                "name": "main",
                "baseline": "1mb",
                "maximumWarning": "100kb",
                "maximumError": "200kb"
              },
              {
                "type": "anyComponentStyle",
                "baseline": "1kb",
                "maximumWarning": "1kb",
                "maximumError": "5kb"
              }
            ]

[alan-agius4]

@squelix, thanks for the above, but I am still unable to replicate your problem.

Application bundle generation failed. [2.480 seconds]

▲ [WARNING] bundle initial exceeded maximum budget. Budget 2.05 kB was not met by 1.45 MB with a total of 1.45 MB.

▲ [WARNING] polyfills exceeded maximum budget. Budget 52.22 kB was not met by 35.90 kB with a total of 88.13 kB.

▲ [WARNING] styles exceeded maximum budget. Budget 2.05 kB was not met by 6.95 kB with a total of 9.00 kB.

▲ [WARNING] main exceeded maximum budget. Budget 103.42 kB was not met by 1.25 MB with a total of 1.36 MB.

✘ [ERROR] main exceeded maximum budget. Budget 205.82 kB was not met by 1.15 MB with a total of 1.36 MB.

✘ [ERROR] src/app/home/home.component.css exceeded maximum budget. Budget 2.05 kB was not met by 6.93 kB with a total of 8.98 kB.

✘ [ERROR] src/app/app.component.css exceeded maximum budget. Budget 2.05 kB was not met by 40.10 kB with a total of 42.15 kB.

[squelix]

With more investigation, if i have this configuration in my angular.json the error appears but when i'm removing all the sourceMap section everything is working fine.

              "sourceMap": {
                "hidden": false,
                "scripts": true,
                "styles": true,
                "vendor": true
              }

I think that the builder compute the budget of the sourcemap files.

@alan-agius4 This is a repro repo => https://github.com/squelix/undefined-budget-angular-repro if you run npm run build:prod you can see undefined in the console.

[angular-automatic-lock-bot[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.}