Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#34,248 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
52/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
angular, sass, typescript
Domaine
build-system, devtools

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
1 j 46 min
PR mergées (30 j)
160

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.