Serve fails to serve node_modules assets in monorepos
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 58/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 停滞
- 技术栈
- typescript, vite
- 领域
- build-system, cli, devtools
调研方向
从 packages/angular/build/src/builders/dev-server/vite/server.ts 中 serverOptions.fs.allow 的设置处开始,然后将其与 Vite 的 searchForWorkspaceRoot 行为进行比较,并使用链接的 monorepo 和 npm start 重现该问题。当 Angular 项目根目录之外的 node_modules 中的资源能够成功加载且不会收到 403 响应时,即表示完成。
由索引模型根据 Issue 内容生成。
描述
Command
serve
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
No response
Description
In a monorepo, node_modules may be located outside the Angular project root folder.
If a library from such outside node_modules tries to load any asset, e.g. a font file from a CSS file, the import is blocked by Vite's dev server with a 403 error.
Minimal Reproduction
-
Clone this repo
git clone https://github.com/maxpatiiuk/angular-monorepo-asset-serve-error cd angular-monorepo-asset-serve-error -
Install dependencies
# To keep reproduction size minimal, I hardcoded a minimal root-level node_modules # So, install Angular dependencies only in the app folder: cd app npm install -
Start the development server in the app folder
npm startSee this error in the browser console:
(index):14 GET http://localhost:4200/@fs/Users/.../angular-monorepo-asset-serve-error/node_modules/external-library/NotoSans.woff2 net::ERR_ABORTED 403 (Forbidden)
Exception or Error
(index):14 GET http://localhost:4200/@fs/Users/.../angular-monorepo-asset-serve-error/node_modules/external-library/NotoSans.woff2 net::ERR_ABORTED 403 (Forbidden)
Your Environment
Angular CLI: 20.2.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64
Angular: 20.2.1
... compiler-cli, core, platform-browser
Package Version
------------------------------------
@angular-devkit/architect 0.2002.0
@angular-devkit/core 20.2.0
@angular-devkit/schematics 20.2.0
@angular/build 20.2.0
@angular/cli 20.2.0
@schematics/angular 20.2.0
rxjs 7.8.2
typescript 5.9.2
Anything else relevant?
Explanation & Solution
If you run the dev server with Vite config logging (DEBUG=vite:config npx ng serve), you will see that the dev server was allowed to serve only the package-level node_modules folder:
vite:config server: {
vite:config ...
vite:config fs: {
vite:config allow: [
vite:config '/Users/mak13180/site/esri/angular-monorepo-asset-serve-error/app/.angular/cache/20.2.0/reproduction/vite',
vite:config '/Users/mak13180/site/esri/angular-monorepo-asset-serve-error/app/node_modules'
vite:config ]
vite:config }
vite:config },
By default, Vite correctly detects that it is being run in a monorepo and allows serving from any monorepo node_modules, but Angular incorrectly overrides this behavior here:
The code comment states These would be available by default but when the 'allow' option is explicitly configured, they must be included manually.. However, Angular does not include things manually correctly.
Fortunately, the Vite's default behavior is easy to get back:
Their default calls searchForWorkspaceRoot(), which is exposed by Vite and can be called manually as documented in https://vite.dev/config/server-options.html#server-fs-allow.
I confirmed that updating the Angular code to the following fixes the issue:
- join(serverOptions.workspaceRoot, 'node_modules'),
+ searchForWorkspaceRoot(serverOptions.workspaceRoot),
- 主要语言
- TypeScript
- 星标
- 27k
- 派生
- 11.8k
- 平均合并
- 16 小时 35 分钟
- 30 天内合并 PR
- 176
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 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 个 reaction ·
-
area: @angular/build gemini-triaged
难度 4/5 3-5 天 新手友好度 72/100
angular/angular-cli#34137 ·
-
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/angular-cli 的全部 Issue
相似的 Issue
-
S: triage
难度 1/5 1 小时以内 新手友好度 85/100
-
难度 2/5 1-3 小时 新手友好度 76/100
-
fix(errors): EHOSTUNREACH from a happy-eyeballs connect is reported as a resolver error (STAMP-80) 未关闭
难度 2/5 1-3 小时 新手友好度 90/100
snapshot-labs/stamp#666 ·
-
bug
难度 2/5 1-3 小时 新手友好度 75/100
GauravKarakoti/SecureFlow#1070 · 1 条评论 ·
-
feature:Languages/Translations good first issue ready Web
难度 2/5 1-3 小时 新手友好度 72/100
digitalfabrik/integreat-app#4394 ·