`deploy-url` is not prepended to imported file url when using `file` loader in `esbuild`

オープン
#32,789 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
55/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
angular, typescript
領域
build-system, cli

調査の方向性

esbuild application builder とその file-loader の処理から始め、angular.json と再現用の ng build --deploy-url=/my-deploy-url/ コマンドを入口として使用します。インポートした SVG URL がどのように生成されるかを確認し、期待される deploy URL の動作と比較します。インポートしたファイルの URL に、ランタイムの workarounds なしで設定された deploy URL が含まれていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

angular/build:application area: @angular/build freq1: low gemini-triaged severity3: broken type: bug/fix
Command

build

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

any webpack-based build

Description

When using Angular v21 with the new esbuild builder, and using a file loader configured for certain file types (like SVG) the --deploy-url argument passed into the build command does not get prepended to the URL returned when importing a file of the said type, and there is no way to configure it to do so.

This was properly working previously with webpack, when loading of the SVG assets was configured with a rule like this:

{
  test: /\.svg$/,
  type: 'asset/resource',
  generator: {
    filename: '[name][hash][ext]',
  },
}

Looks like with esbuild there is no way to achieve the same result, apart from manually adding deploy-url to imported URLs in runtime.

Minimal Reproduction
  1. Use esbuild application builder
  2. Configure angular.json to use file loader to import a certain file type:
"loader": {
  ".svg": "file"
},
  1. Build application using ng build --deploy-url=/my-deploy-url/
  2. Import some SVG file in the app:
import mySvgUrl from './my-image.svg';
  1. Observe: mySvgUrl does not have /my-deploy-url/ prepended to it
Exception or Error

No error

Your Environment
Angular CLI       : 21.2.2
Angular           : 21.2.4
Node.js           : 24.8.0
Package Manager   : npm 11.6.0
Operating System  : darwin arm64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations               │ 21.2.4            │ 21.2.4            │
│ @angular/build                    │ 21.2.2            │ 21.2.2            │
│ @angular/cdk                      │ 21.2.2            │ 21.2.2            │
│ @angular/cli                      │ 21.2.2            │ 21.2.2            │
│ @angular/common                   │ 21.2.4            │ 21.2.4            │
│ @angular/compiler                 │ 21.2.4            │ 21.2.4            │
│ @angular/compiler-cli             │ 21.2.4            │ 21.2.4            │
│ @angular/core                     │ 21.2.4            │ 21.2.4            │
│ @angular/elements                 │ 21.2.4            │ 21.2.4            │
│ @angular/forms                    │ 21.2.4            │ 21.2.4            │
│ @angular/localize                 │ 21.2.4            │ 21.2.4            │
│ @angular/platform-browser         │ 21.2.4            │ 21.2.4            │
│ @angular/platform-browser-dynamic │ 21.2.4            │ 21.2.4            │
│ @angular/router                   │ 21.2.4            │ 21.2.4            │
│ rxjs                              │ 7.8.2             │ 7.8.2             │
│ typescript                        │ 5.9.3             │ 5.9.3             │
│ vitest                            │ 4.0.18            │ 4.0.18            │
│ zone.js                           │ 0.16.0            │ 0.16.0            │
└───────────────────────────────────┴───────────────────┴───────────────────┘
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
16時間 21分
マージ済み PR(30日)
170

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。