Font inlining cache is not created or reused

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#34,719 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

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

@nagahara-naoki y travaille déjà.

Depuis le 14/11/2026.

  • #34720 par @nagahara-naoki — ouverte

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
build-system

Piste de recherche

Commence dans packages/angular/build/src/utils/index-file/inline-fonts.ts. Compare le hachage de lecture du cache (SHA-256 en Base64, vers la ligne 184) avec le hachage d'écriture du cache (hexadécimal, vers la ligne 258), et vérifie que le chemin d'écriture crée le répertoire parent avant d'appeler writeFile. La tâche est terminée lorsque le répertoire du cache est créé automatiquement et qu'un second build, avec le réseau bloqué, réutilise la feuille de style enregistrée sans nouvelle requête. Les étapes de reproduction de l'issue permettent de le vérifier.

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

Description

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.
Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
1 j 3 h
PR mergées (30 j)
271

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.