Font inlining cache is not created or reused

Open Beginner friendly
  • Is something wrong?
#34,719 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@nagahara-naoki is already working on this.

Since Nov 14, 2026.

  • #34720 by @nagahara-naoki — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
build-system

Research direction

Start in packages/angular/build/src/utils/index-file/inline-fonts.ts. Compare the cache-read hash (Base64 SHA-256, around line 184) with the cache-write hash (hexadecimal, around line 258), and check that the write path creates its parent directory before calling writeFile. Done when the cache directory is created automatically, and a second build with the network blocked reuses the saved stylesheet without a new request. The reproduction steps in the issue can verify this.

Written by the indexing model from the issue text.

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