angular / angular/angular-cli

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

オープン
#32,789 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る
angular/build:application area: @angular/build freq1: low gemini-triaged severity3: broken type: bug/fix
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### Command

build

### Is this a regression?

- [x] 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"
},
```
3. Build application using `ng build --deploy-url=/my-deploy-url/`
4. Import some SVG file in the app:
```
import mySvgUrl from './my-image.svg';
```
5. Observe: `mySvgUrl` does not have `/my-deploy-url/` prepended to it

### Exception or Error

No error

### Your Environment

```text
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 │
└───────────────────────────────────┴───────────────────┴───────────────────┘
```

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

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

調査の方向性

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

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

評価

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

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

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