Angular never loads an external library .css asset

[maxpatiiuk]

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

If external library has a CSS import, the asset will be processed by Angular (in both dev server and build), but never actually loaded in the browser.

Minimal Reproduction

1. Clone this repo

   git clone https://github.com/maxpatiiuk/angular-css-asset-lost
   cd angular-css-asset-lost

2. Install dependencies

   # To keep reproduction size minimal, I hardcoded a minimal root-level node_modules
   # So, install Angular dependencies only in the app folder:
   cd app
   npm install

3. Start the development server in the app folder

   npx ng serve

   See that the CSS is never loaded in the browser (page would turn green if it was loaded).

4. Build the app

   npx ng build

   Build output:

   > ng build
   
   Initial chunk files | Names         | Raw size | Estimated transfer size
   main.js             | main          | 91.03 kB |                27.28 kB
   
                       | Initial total | 91.03 kB |                27.28 kB
   
   Lazy chunk files    | Names         | Raw size | Estimated transfer size
   main.css            | -             | 56 bytes |                56 bytes

   The lazy chunk is created, but never referenced in the index.html or any .js file.

   You can serve the build in the browser to verify:

   npx serve dist/reproduction/browser -p 4200

See node_modules/external-library/ for the dummy external library with a CSS file.

Exception or Error

Your Environment

Angular CLI: 20.2.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64
    

Angular: 20.2.1
... compiler-cli, core, platform-browser

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.0
@angular-devkit/core         20.2.0
@angular-devkit/schematics   20.2.0
@angular/build               20.2.0
@angular/cli                 20.2.0
@schematics/angular          20.2.0
rxjs                         7.8.2
typescript                   5.9.2

Anything else relevant?

What I tried and does not fix the issue:

• package.json sideEffects setting (saying that .css or everything is side effect).
• package.json exports (explicitly exporting the .css file).
• reproduced in a real package that exports real things besides .css so this dummy package is not the issue.

In development server, setting "optimization": true build option fixes the issue, but that does not work in production.

[maxpatiiuk]

Use case:

• My component library has global css (for css variables). It also consumes several other component libraries, each of which also has global css. I wish to auto-load the styles for my consumers to simplify the "Get started" instructions.

This works in most bundlers, but not in Angular.

[alan-agius4]

This expected and is the same behaviour of esbuild which is documented in their documentation: https://esbuild.github.io/content-types/#css-from-js

The fact that under certain conditions it works in ng serve seems to be an unexpected behaviour.

[maxpatiiuk]

Thanks for a quick reply!

Assuming that this is expected behavior, could you please advise how should an end user handle this?

Should the user manually import such CSS file in their index.html? Unfortunately, while that fixes the build, it causes a 404 error in the dev server.

Moreover, if outputHashing is enabled, the output CSS file name is not stable, so manually importing it is not possible.

---

For reference, here is how other bundlers & frameworks handled such case:

• Vite, Webpack (css-loader or experiments.css), Rspack, AnalogJS, Next.js, Parcel: css is bundled & auto-loaded automatically
• ESBuild: all CSS is bundled into a single CSS file with a controllable name (regardless if the CSS file was imported in CSS or in JS). Plus, the user can customize this with a plugin.
• Rollup, Rolldown: a community plugin can be used (I am not sure if this is possible in angular-cli)