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

Offen

#34,248 erstellt am 03.10.2026 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 4/5
Geschätzter Aufwand: 3-5 Tage
Anfängerfreundlichkeit: 52/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Aktiv
Tech-Stack: angular, sass, typescript
Bereich: build-system, devtools

Rechercherichtung

Reproduce the issue with the supplied minimal Angular application and edit sequence, then inspect @angular/build/src/builders/application/execute-build.js around externalRuntimeStyles and componentStyleBundler. Trace how incremental results reach the dev-server asset map, including bundler caching and result merging. Done means every served component stylesheet reflects the latest successful source state after each rebuild, with regression coverage.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: @angular/build

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/[email protected] 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/&amp;/\&/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).

Vorherrschende Sprache: TypeScript
Sterne: 27k
Forks: 11.8k
Ø Merge: 1 T. 1 Std.
Gemergte PRs (30 T.): 161

Entwicklungsumgebung

Kein Dockerfile und keine Docker-Compose-Datei
Hat eine Pull-Request-Vorlage
Beitragsleitfaden lesen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Can't use an array of hostnames in --allowedHosts cli parameter in @angular/build:dev-server
Offen
- Stimmt etwas nicht?
area: @angular/build gemini-triaged

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100

angular/angular-cli#33955 · Erstellt am 28.8.2026

Maintainer antworten meist innerhalb von 1 Tag
Allow tests to pass without any test files (e.g. via Vitest `passWithNoTests`)
Offen
- Stimmt etwas nicht?
area: @angular/cli gemini-triaged

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100

angular/angular-cli#33055 · 1 Kommentar · 3 Reaktionen · Erstellt am 26.4.2026

Maintainer antworten meist innerhalb von 1 Tag
SSR resolves relative `redirectTo` against the wrong base when the route path has several segments
Evtl. vergeben @bschaeublin hat das vor 1 Tag übernommen. Offen
- Stimmt etwas nicht?
area: @angular/ssr

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 45/100

angular/angular-cli#34300 · Erstellt am 09.10.2026

Maintainer antworten meist innerhalb von 1 Tag
SSR route redirects drop the query string on relative `redirectTo`
Evtl. vergeben @bschaeublin hat das vor 1 Tag übernommen. Offen
- Stimmt etwas nicht?
area: @angular/ssr

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 45/100

angular/angular-cli#34298 · Erstellt am 09.10.2026

Maintainer antworten meist innerhalb von 1 Tag
Chunk optimizer drops a chunk shared between the main bundle and a web worker
Offen
- Stimmt etwas nicht?
area: @angular/build

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 25/100

angular/angular-cli#34292 · Erstellt am 09.10.2026

Maintainer antworten meist innerhalb von 1 Tag

Alle Issues in angular/angular-cli

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

Stimmt etwas nicht?

Bewertung

Rechercherichtung

Beschreibung

Command

Is this a regression?

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

Entwicklungsumgebung

Erste Schritte

Mehr aus angular/angular-cli

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Ähnliche Issues

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Stimmt etwas nicht?

Neue Issues direkt in Ihr Postfach