`deploy-url` is not prepended to imported file url when using `file` loader in `esbuild`
まだ誰も着手していません。
評価
- 難易度
- 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 の本文から書いたものです。
説明
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
- Use
esbuildapplication builder - Configure angular.json to use
fileloader to import a certain file type:
"loader": {
".svg": "file"
},
- Build application using
ng build --deploy-url=/my-deploy-url/ - Import some SVG file in the app:
import mySvgUrl from './my-image.svg';
- Observe:
mySvgUrldoes 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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/angular-cli のほかの issue
-
area: @angular/build gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/angular-cli#33055 · コメント 1 件 · リアクション 3 件 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 担当者 1 名 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 担当者 1 名 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34128 · 担当者 1 名 ·
angular/angular-cli の issue をすべて見る
似ている issue
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
-
Ecosystem: ClawMetry — the Qwen Code reader is now free and open source (follow-up to #9294 / #9338) オープンcategory/integration priority/P3 scope/documentation status/ready-for-human type/feature-request
難易度 1/5 1時間未満 初心者へのやさしさ 84/100
-
area:auth FE mvp P3
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
klasolsson81/jobbliggaren#1788 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
get-convex/migrations#69 ·
-
accessibility angular bug good first issue typescript ux
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
apache/fineract-backoffice-ui#584 · コメント 1 件 ·