angular / angular/angular-cli

Bug: esbuild builder 3rd party libs built not properly with browserify paths

未关闭
#27,495 5 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

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

none

### Description

We're currently in the evaluation of replacing the Webpack with ESBuild process from Angular.

The only blocker right now is, that the path replacements for the building process does not work as expected and the application directly crashes into a white screen.

### Minimal Reproduction

https://github.com/JohnnyDevNull/angular17-esbuild-browserify-error

1. Checkout the mentioned reproduction repo
2. `npm install`
3. `ng serve`

Open the app and you will directly see an Vite warning and the error from the 3rd party library we are using `fhir` in this case for the healthcare sector.

```
Module "stream" has been externalized for browser compatibility. Cannot access "stream.Stream" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
```

![Bildschirmfoto 2024-04-18 um 11 30 19](https://github.com/angular/angular-cli/assets/5759334/0fa0d4cb-afde-4aab-8c85-9e44ef774bb7)

```
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
```

![Bildschirmfoto 2024-04-18 um 11 30 30](https://github.com/angular/angular-cli/assets/5759334/d3715cc0-7127-4c04-a88f-c6f3efcc2618)

![Bildschirmfoto 2024-04-18 um 11 30 43](https://github.com/angular/angular-cli/assets/5759334/d310b1ed-30cf-4a06-a424-6ddff74e101c)

As you can see in the configs below I've added the `paths` and `browser` properties to help esbuild understand the mapping, but it does not work anyways.

Just to mention, the 3rd party library is a CommonJS library, which we cannot avoid here, so its added to the `allowedCommonJsDependencies` configuration.

tsconfig.json
```
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
],
"baseUrl": ".",
"paths": {
"stream": ["node_modules/stream-browserify"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
```

package.json
```
{
"name": "ng-dummy",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"fhir": "^4.12.0",
"rxjs": "~7.8.0",
"stream-browserify": "^3.0.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.4",
"@angular/cli": "^17.3.4",
"@angular/compiler-cli": "^17.3.0",
"@types/fhir": "^0.0.41",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
},
"browser": {
"stream": "stream-browserify"
}
}
```

### Exception or Error

```
Module "stream" has been externalized for browser compatibility. Cannot access "stream.Stream" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
```

```
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
```

### Your Environment

```text
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 17.3.4
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.3.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.4
@angular-devkit/build-angular 17.3.4
@angular-devkit/core 17.3.4
@angular-devkit/schematics 17.3.4
@schematics/angular 17.3.4
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4
```

### Anything else relevant?

This issue was already reported with https://github.com/angular/angular-cli/issues/26901 but sadly to say closed. I hope you have now a better picture with my simple reproduction repo.

贡献指南

打开贡献指南

调研方向

克隆链接的复现仓库,运行 npm install 和 ng serve,并确认 Vite 外部化警告和运行时错误。检查 esbuild builder 如何处理 tsconfig.json 中的路径映射以及 package.json 中的浏览器映射;当 fhir 依赖项加载时不再出现 stream 警告或 prototype 错误,即表示完成。

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

评估

技术栈
angular, typescript
领域
build-system, cli
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

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