serve: with NG_HMR_CSTYLES=1, component stylesheets not touched by the last change revert to first-build content after a rebuild

[johnjspiteri]

Command

serve

Is this a regression?

Unknown. I have only tested 22.2.1.

Description

With NG_HMR_CSTYLES=1 (link-based component style hot reloading), ng serve emits component stylesheets as external /<hash>.css?ngcomp=... links. After a rebuild, the dev server serves fresh content only for the stylesheet(s) affected by that change. Every other component stylesheet is served with its content from the first build, dropping earlier edits that are still saved on disk.

Each check below is a fresh request for the page and its ?ngcomp links, so a freshly loaded page receives the stale content too.

Without the flag, the same edit sequence (steps c1 to c5) produces no stale stylesheet.

Hypothesis (unverified, from reading the code, not from debugging): in @angular/build/src/builders/application/execute-build.js, on every rebuild with externalRuntimeStyles the code runs

// TODO: Only attempt rebundling of invalidated styles once incremental build results are supported.
if (rebuildState && options.externalRuntimeStyles) {
    componentStyleBundler.invalidate(rebuildState.fileChanges.all);
    const componentResults = await componentStyleBundler.bundleAllFiles(true, true);
    bundlingIndividualResults.push(...componentResults);
}

so only the invalidated sheets are re-bundled, and the sheets that are not invalidated seem to be served from their initial-build output rather than their last-built output. I have not confirmed which layer (bundler cache, result merging, or the dev server asset map) drops the later content.

Side observation, no claim about impact: with the flag, the SSR HTML contains no inline <style> tags for component styles (links only); without it, it contains one <style> per component.

Minimal Reproduction

pnpm dlx @angular/cli@22.2.1 new repro --ssr --style=scss --defaults --skip-git --package-manager=pnpm
cd repro
mkdir src/app/a src/app/b

src/app/_p.scss:

$color: red;

src/app/a/a.ts (and the same for src/app/b/b.ts with b/BComponent/app-b):

import { Component } from '@angular/core';

@Component({
  selector: 'app-a',
  template: '<p class="a">a</p>',
  styleUrl: './style.scss',
})
export class AComponent {}

src/app/a/style.scss (and the same for b with .b/BASELINE-b):

@use '../p';
.a { color: p.$color; }
.BASELINE-a { order: 0; }

src/app/app.html:

<app-a />
<app-b />

src/app/app.ts: import AComponent and BComponent and add them to imports.

Serve with the flag:

NG_HMR_CSTYLES=1 pnpm exec ng serve --port 8094 --no-open

Helper that fetches the page, takes every ?ngcomp link and prints which marker classes each sheet contains (check.sh):

#!/bin/zsh
label=$1
html=$(curl -s http://localhost:8094/)
echo "--- $label"
echo "$html" | grep -oE 'href="[^"]*ngcomp[^"]*"' | sed -E 's/href="//; s/"$//; s/&/\&/g' | while read -r h; do
  body=$(curl -s "http://localhost:8094/$h")
  who=$(echo "$body" | grep -oE '^\.(a|b) ' | head -1 | tr -d ' .')
  markers=$(echo "$body" | grep -oE '(BASELINE|MARK)-[A-Za-z0-9-]+' | tr '\n' ' ')
  echo "$h  sheet=${who:-empty(app)}  markers: $markers"
done

Edit sequence (wait about 4 seconds after each edit for the rebuild, then run ./check.sh <label>):

./check.sh baseline
printf '.MARK-P1 { order: 1; }\n' >> src/app/_p.scss      # c1: edit partial
printf '.MARK-P2 { order: 2; }\n' >> src/app/_p.scss      # c2: edit partial again
printf '.MARK-A1 { order: 1; }\n' >> src/app/a/style.scss # c3: edit sheet A only
printf '.MARK-P3 { order: 3; }\n' >> src/app/_p.scss      # c4: edit partial again
printf '.MARK-B1 { order: 1; }\n' >> src/app/b/style.scss # c5: edit sheet B only
printf '.MARK-A2 { order: 2; }\n' >> src/app/a/style.scss # c6: edit sheet A only

Observed with NG_HMR_CSTYLES=1 (markers present in each served sheet; all edits are saved on disk):

step	sheet A (a/style.scss)	sheet B (b/style.scss)
baseline	BASELINE-a	BASELINE-b
c1 edit _p.scss	P1 BASELINE-a	P1 BASELINE-b
c2 edit _p.scss	P1 P2 BASELINE-a	P1 P2 BASELINE-b
c3 edit A only	P1 P2 BASELINE-a A1	BASELINE-b (lost P1, P2)
c4 edit _p.scss	P1 P2 P3 BASELINE-a A1	P1 P2 P3 BASELINE-b
c5 edit B only	BASELINE-a (lost P1 P2 P3 A1)	P1 P2 P3 BASELINE-b B1
c6 edit A only	P1 P2 P3 BASELINE-a A1 A2	BASELINE-b (lost P1 P2 P3 B1)

(Marker names abbreviated: P1 is MARK-P1, etc. At c5 and c6 the partial still contains P1, P2 and P3 on disk.)

Control: steps c1 to c5 without NG_HMR_CSTYLES (component styles inlined in the SSR HTML, no ngcomp links). Every step shows all markers present in both sheets, e.g. after c3 sheet B has MARK-P1 MARK-P2 BASELINE-b, after c5 sheet A has MARK-P1 MARK-P2 MARK-P3 BASELINE-a MARK-A1 and sheet B has MARK-P1 MARK-P2 MARK-P3 BASELINE-b MARK-B1.

Expected: after each rebuild every served component stylesheet reflects the current content of its sources (the latest successful build), not only the stylesheets touched by the latest change.

Actual: untouched sheets revert to their first-build content until they are touched again.

Exception or Error

No error is reported by the dev server. Its log only says Component stylesheet(s) changed. and Stylesheet update sent to client(s)..

Your Environment

Angular CLI       : 22.2.1
Angular           : 22.2.1
Node.js           : 26.7.0
Package Manager   : pnpm 10.30.2
Operating System  : darwin arm64

@angular/build            : 22.2.1
@angular/cli              : 22.2.1
@angular/common           : 22.2.1
@angular/compiler         : 22.2.1
@angular/compiler-cli     : 22.2.1
@angular/core             : 22.2.1
@angular/platform-browser : 22.2.1
@angular/platform-server  : 22.2.1
@angular/router           : 22.2.1
@angular/ssr              : 22.2.1
rxjs                      : 7.8.2
typescript                : 6.0.3

Anything else relevant?

Stylesheets were checked with curl against the dev server (a fresh request per step), not in a browser, so I have not observed the visual effect in a browser. macOS (Darwin 25.x, arm64).