@angular/build:unit-test does not include global styles.css file

[wein2011]

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

@angular/build:karma

Description

The application includes global styles in angular.json:

architect.build.styles: ["src/custom-theme.scss", "src/styles.css"]

Karma (@angular/build:karma) serves the resulting global styles.css as

http://localhost:9876/base/styles.css

and includes it into the html file of the test iframe.

Similary, Vitest (@angular/build:unit-test) builds the global styles.css and servers it as

http://localhost:63315/styles.css

However, Vitest does not include it into the html file of the test iframe.

Due to the missing styles, some of the tests fail using the chromium browser.

Minimal Reproduction

In angular.json: Include global styles

architect.build.styles: ["src/custom-theme.scss", "src/styles.css"]

Include chromium browser

architect.test.options.browsers: ["chromium"]

Execute test

Validate that dist\test-out\HASH folder includes styles.css

Open chromium and check if any of the global styles from styles.css have been applied to the tests

Exception or Error

Your Environment

Angular CLI: 20.0.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                              Version
--------------------------------------------------------------
@angular-devkit/architect            0.2000.0
@angular-devkit/core                 20.0.0
@angular-devkit/schematics           20.0.0
@angular/cdk                         20.0.1
@angular/material                    20.0.1
@angular/material-date-fns-adapter   20.0.1
@schematics/angular                  20.0.0
rxjs                                 7.8.2
typescript                           5.8.3

Anything else relevant?

No response

[clydin]

This is something that should be able to be addressed.

Would it be possible to provide some details on a unit test case that would require styles? It does appear that a browser is being used but application of styles may not work in other cases (jsdom usage, for instance).

For context, an option to bypass all style processing has been considered to avoid the overhead of processing the styles which in the majority of cases would not affect a typical unit test. Better understanding various use cases would help to evaluate the tradeoffs of such an option.

[wein2011]

The inclusion of styles helps with the consistency between actual deployment and test debugging.

With Karma, the regression tests are run against ChromeHeadless and the manual tests for debugging are run against Chrome. The reason for the use of an actual browser vs. jsdom is not only related to consistency but also to eliminate issues related to mocking features such as ResizeObserver.

In addition, many of the tests include ag-grid with generates many warnings like: AG Grid: error #9 No value for --ag-row-height. This usually means that the grid has been initialised before styles have been loaded. The default value of 42 will be used and updated when styles load.

I believe an option to turn off style processing and inclusion would be good for some other projects to improve performance when using jsdom. However, I believe the default (at least in browser mode) should be to turn on processing and inclusion to simplify the migration to and usage of the unit-test runner.

Since the processing is already enabled, it would be great to also include the resulting styles.css in case of browser mode for now. This would allow us to continue our migration efforts.

[wein2011]

To temporary work around the issue, you can load the stylesheet styles.css programmatically.

In angular.json, add the following json element

test.options.providersFile: "test-providers.ts"

In test-providers.ts, add

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/styles.css';
document.head.appendChild(link);

export default [];

[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.}