angular / angular/angular-cli

Serve fails to serve node_modules assets in monorepos

Đang mở
#31,016 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @angular/build devkit/build-angular:dev-server freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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

```sh
git clone https://github.com/maxpatiiuk/angular-monorepo-asset-serve-error
cd angular-monorepo-asset-serve-error
```

2. Install dependencies

```sh
# 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

```sh
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

```text
(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

```text
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:

```yaml
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:

```diff
- join(serverOptions.workspaceRoot, 'node_modules'),
+ searchForWorkspaceRoot(serverOptions.workspaceRoot),
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với packages/angular/build/src/builders/dev-server/vite/server.ts, tại phần thiết lập serverOptions.fs.allow, sau đó so sánh với hành vi searchForWorkspaceRoot của Vite và tái hiện vấn đề với monorepo được liên kết cùng npm start. Hoàn tất khi các asset từ node_modules nằm bên ngoài thư mục gốc của dự án Angular được tải thành công mà không nhận phản hồi 403.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
typescript, vite
Lĩnh vực
build-system, cli, devtools
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
58/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.