Font inlining cache is not created or reused

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#34,719 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@nagahara-naoki đang làm issue này rồi.

Từ ngày 14/11/2026.

  • #34720 của @nagahara-naoki — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
82/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
build-system

Hướng nghiên cứu

Bắt đầu từ packages/angular/build/src/utils/index-file/inline-fonts.ts. So sánh hash đọc cache (SHA-256 dạng Base64, khoảng dòng 184) với hash ghi cache (dạng thập lục phân, khoảng dòng 258), và kiểm tra xem đường dẫn ghi có tạo thư mục cha trước khi gọi writeFile hay không. Công việc hoàn thành khi thư mục cache được tạo tự động và lần build thứ hai, khi mạng bị chặn, tái sử dụng stylesheet đã lưu mà không gửi yêu cầu mới. Các bước tái tạo trong issue có thể dùng để kiểm chứng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
271

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/angular-cli

Tất cả issue của angular/angular-cli

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.