Serve fails to serve node_modules assets in monorepos
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Facilidade para iniciantes
- 58/100
- Tipo de issue
- Bug
- Clareza
- Claramente especificada
- Status de atividade
- Estagnada
- Stack de tecnologia
- typescript, vite
- Domínio
- build-system, cli, devtools
Direção de pesquisa
Comece por packages/angular/build/src/builders/dev-server/vite/server.ts, na configuração de serverOptions.fs.allow; depois compare-a com o comportamento de searchForWorkspaceRoot do Vite e reproduza o problema com o monorepo vinculado e npm start. Está concluído quando os assets de node_modules fora da raiz do projeto Angular forem carregados com sucesso sem uma resposta 403.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
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),
- Linguagem predominante
- TypeScript
- Estrelas
- 27k
- Forks
- 11.8k
- Merge médio
- 17h 25min
- PRs com merge (30d)
- 183
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de angular/angular-cli
-
area: @angular/build gemini-triaged
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 72/100
angular/angular-cli#33055 · 1 comentário · 3 reações ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 responsável ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 responsável ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34128 · 1 responsável ·
Todas as issues de angular/angular-cli
Issues semelhantes
-
blocklist removal
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 70/100
pastelsky/bundlephobia#1122 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 75/100