angular / angular/angular-cli

Serve fails to serve node_modules assets in monorepos

Offen
#31,016 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: @angular/build devkit/build-angular:dev-server freq1: low severity3: broken type: bug/fix
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
14 Std. 23 Min.
Gemergte PRs (30 T.)
162

Beschreibung

### 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),
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit packages/angular/build/src/builders/dev-server/vite/server.ts rund um die Einrichtung von serverOptions.fs.allow, vergleiche dies anschließend mit Vites searchForWorkspaceRoot-Verhalten und reproduziere das Problem mit dem verlinkten Monorepo und npm start. Erledigt ist es, wenn Assets aus node_modules außerhalb des Angular-Projektstammverzeichnisses erfolgreich geladen werden, ohne dass eine 403-Antwort zurückgegeben wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript, vite
Bereich
build-system, cli, devtools
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
58/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.