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

Open
  • Is something wrong?
#34,248 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
angular, sass, typescript
Domain
build-system, devtools

Research direction

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.

Written by the indexing model from the issue text.

Description

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).

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
1d 3h
Merged PRs (30d)
271

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.