Font inlining cache is not created or reused #34719

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.