Font inlining cache is not created or reused

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#34,719 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@nagahara-naoki arbeitet bereits daran.

Seit 14.11.2026.

  • #34720 von @nagahara-naoki — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
build-system

Rechercherichtung

Beginne in packages/angular/build/src/utils/index-file/inline-fonts.ts. Vergleiche den Cache-Lese-Hash (Base64 SHA-256, etwa Zeile 184) mit dem Cache-Schreib-Hash (hexadezimal, etwa Zeile 258) und prüfe, ob der Schreibpfad das übergeordnete Verzeichnis anlegt, bevor writeFile aufgerufen wird. Fertig ist, wenn das Cache-Verzeichnis automatisch angelegt wird und ein zweiter Build bei blockiertem Netzwerk das gespeicherte Stylesheet ohne neue Anfrage wiederverwendet. Die Reproduktionsschritte im Issue können dies überprüfen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: @angular/build

Hi! I found two issues with the font stylesheet disk cache: the cache directory isn't created automatically, and even when it exists, valid cached CSS is deleted instead of reused.

Command

build

Is this a regression?

I haven't verified the last working version.

Description

When font inlining is enabled, the CLI can cache stylesheets fetched from Google Fonts. However, the cache currently does not prevent repeated downloads. A build can fail when the font request is unavailable, even after the same stylesheet was successfully cached by the previous build.

Minimal Reproduction

Minimal reproduction and run instructions

The application uses Angular CLI and @angular/build 22.2.6, with persistent caching and font inlining enabled. Its global stylesheet imports:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap");

Run locally to test the disk cache across separate CLI builds. The following commands are for macOS/Linux.

1. Build with an internet connection.

git clone --single-branch --branch repro-font-inline-cache https://github.com/nagahara-naoki/angular-cli.git font-cache-repro
cd font-cache-repro
npm ci
npm run build
ls .angular/cache/22.2.6/repro/angular-build-fonts

The build succeeds, but the font cache directory does not exist.

2. Create the missing directory and build again while online.

mkdir -p .angular/cache/22.2.6/repro/angular-build-fonts
npm run build
ls .angular/cache/22.2.6/repro/angular-build-fonts

The build succeeds and creates one cache file.

3. Build again with an unreachable HTTPS proxy.

HTTPS_PROXY=http://127.0.0.1:9 npm run build
ls .angular/cache/22.2.6/repro/angular-build-fonts

The proxy setting applies only to that command, allowing the font request to fail without changing system network settings.

The build fails, and the previously saved cache file has been deleted. The directory is now empty.

Expected Behavior

The CLI creates the cache directory automatically. Once the font stylesheet is cached, subsequent builds reuse it without requesting the same URL again.

Actual Behavior

The directory is not created automatically. After creating it manually, the next build discards valid cached content and attempts another download. If that request fails, the build fails too.

Exception or Error
Failed to inline external stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'.

Error: Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap over the internet.
connect ECONNREFUSED 127.0.0.1:9
Your Environment
Angular CLI: 22.2.6
Angular: 22.2.6
@angular/build: 22.2.6
Node.js: 24.22.2
npm: 11.19.1
TypeScript: 6.0.3
OS: macOS 26.5.2, arm64
Anything else relevant?

The same causes are present in InlineFontsProcessor at repository commit 8b26efa1ba2b922d459f88add85e7e9a9a1dd9de:

  • Cache reads compute a Base64 SHA-256 hash, while cache writes store a hexadecimal hash. These cannot match, so valid cache files are treated as corrupted and removed.
  • The write path calls writeFile without creating the parent directory. The resulting error is caught, so the build succeeds without saving the stylesheet.
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
271

Entwicklungsumgebung

Erste Schritte

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

Mehr aus angular/angular-cli

Alle Issues in angular/angular-cli

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.