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

複製連結的重現 repository，執行 npm install 和 ng serve，並確認 Vite 外部化警告和執行階段錯誤。檢查 esbuild builder 如何處理 tsconfig.json 中的路徑對映以及 package.json 中的瀏覽器對映；當 fhir 相依套件載入時不再出現 stream 警告或 prototype 錯誤，即表示完成。

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.

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

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

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

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.