Serve fails to serve node_modules assets in monorepos

未关闭
#31,016 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
58/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
停滞
技术栈
typescript, vite

调研方向

从 packages/angular/build/src/builders/dev-server/vite/server.ts 中 serverOptions.fs.allow 的设置处开始,然后将其与 Vite 的 searchForWorkspaceRoot 行为进行比较,并使用链接的 monorepo 和 npm start 重现该问题。当 Angular 项目根目录之外的 node_modules 中的资源能够成功加载且不会收到 403 响应时,即表示完成。

由索引模型根据 Issue 内容生成。

描述

area: @angular/build devkit/build-angular:dev-server freq1: low severity3: broken type: bug/fix
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
  1. Clone this repo

    git clone https://github.com/maxpatiiuk/angular-monorepo-asset-serve-error
    cd angular-monorepo-asset-serve-error
    
  2. 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
    
  3. Start the development server in the app folder

    npm start
    

    See 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:

https://github.com/angular/angular-cli/blob/cc05242aa8354f3280b5a70eb1f9c0e9d85f1408/packages/angular/build/src/builders/dev-server/vite/server.ts#L80-L90

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:

https://github.com/vitejs/vite/blob/e899bc7c73a27cdf327875e5d696c50d396a7fc2/packages/vite/src/node/server/index.ts#L1126-L1127

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。