Font inlining cache is not created or reused
メンテナーはふだん 1 日以内に返信
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 82/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- typescript
- 領域
- build-system
調査の方向性
packages/angular/build/src/utils/index-file/inline-fonts.ts から始めてください。キャッシュ読み取り時のハッシュ（Base64 の SHA-256、184 行目付近）と、キャッシュ書き込み時のハッシュ（16 進数、258 行目付近）を比較し、書き込み処理が writeFile を呼び出す前に親ディレクトリを作成しているかを確認してください。キャッシュディレクトリが自動的に作成され、ネットワークを遮断した状態での 2 回目のビルドが、新たなリクエストなしで保存済みのスタイルシートを再利用すれば完了です。issue の再現手順で検証できます。
索引モデルが issue の本文から書いたものです。
説明
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
writeFilewithout creating the parent directory. The resulting error is caught, so the build succeeds without saving the stylesheet.
- 主要言語
- TypeScript
- スター
- 27k
- フォーク
- 11.8k
- 平均マージ
- 1日 3時間
- マージ済み PR（30日）
- 271
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/angular-cli のほかの issue
-
area: @angular/cli
難易度 3/5 半日 初心者へのやさしさ 42/100
angular/angular-cli#34716 ·
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 72/100
angular/angular-cli#34688 ·
メンテナーはふだん 1 日以内に返信
-
`ng generate application` produces a missing stylesheet when a workspace component type is configured対応中かも @nagahara-naoki が 2 日前に担当しました。 オープンarea: @schematics/angular
難易度 2/5 1〜3時間 初心者へのやさしさ 25/100
angular/angular-cli#34684 ·
メンテナーはふだん 1 日以内に返信
-
area: @angular/build
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
angular/angular-cli#34674 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Tailwind CSS v4 classes in new or moved files are not picked up by ng serve until another rebuild再び着手できるかも このイシューのプルリクエストはマージされずにクローズされました。 オープンarea: @angular/build
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
angular/angular-cli#34446 ·
メンテナーはふだん 1 日以内に返信
angular/angular-cli の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
OHDSI/Data2Evidence#3693 ·
メンテナーはふだん 3 日以内に返信
-
severity:low triage:confirmed
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
Cotal-AI/Cotal#6803 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug package:workers-shared
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
cloudflare/workers-sdk#16924 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug frontend priority: low
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
nooriegarg/ContribIQ#74 ·
メンテナーはふだん 1 日以内に返信
-
parse: child keys like `007`, `1e3`, `0x1f`, `-1` make the parent an empty array and hide the valueオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100