Serve fails to serve node_modules assets in monorepos
- 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
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