同package.json下Angular-Fire在pnpm失效npm正常原因排查

问题重现 #

使用pnpm搭建Angular项目并集成AngularFire后构建失败，操作步骤如下：

ng new pnpm-project --skip-install # 创建新项目
cd pnpm-project
ng config cli.packageManager pnpm
ng generate environments
pnpm install
pnpm build # 构建正常

# 添加@angular/fire
ng add @angular/fire
ng build # 报错

报错信息：

./node_modules/.pnpm/rxfire@6.0.3_firebase@9.17.1+rxjs@7.8.0/node_modules/rxfire/firestore/index.esm.js:137:40-53
Error: export '__spreadArray' (imported as '__spreadArray') was not found in 'tslib' (possible exports: __assign, __asyncDelegator, __asyncGenerator, __asyncValues, __await, __awaiter, __classPrivateFieldGet, __classPrivateFieldSet, __createBinding, __decorate, __exportStar, __extends, __generator, __importDefault, __importStar, __makeTemplateObject, __metadata, __param, __read, __rest, __spread, __spreadArrays, __values)

切换为npm则构建正常：

rm -rf node_modules
npm install
ng build

疑问：相同package.json下，pnpm和npm的依赖解析结果为何差异巨大？

原因分析 #

核心差异源于两者的依赖管理机制：

• npm采用扁平的node_modules结构，会自动将依赖树中高版本的包提升到根目录，确保所有依赖包共享这个高版本。此场景中，npm自动提升了包含__spreadArray导出的高版本tslib，让rxfire可以正常调用。
• pnpm默认采用严格的依赖隔离，每个包只会使用自身package.json声明版本范围内的依赖。rxfire@6.0.3的依赖声明中，tslib版本范围可能包含低于2.5.0的版本（__spreadArray是tslib@2.5.0新增的导出），pnpm为其安装了符合范围的低版本tslib，导致缺少所需导出。

解决方案 #

方案1：通过pnpm overrides强制rxfire使用兼容版本的tslib #

在项目根目录的package.json中添加以下配置：

"pnpm": {
  "overrides": {
    "rxfire>tslib": "^2.5.0"
  }
}

执行pnpm install后重新构建即可。

方案2：升级项目根依赖的tslib版本 #

直接升级项目的tslib到包含__spreadArray的版本（如^2.5.0）：

pnpm add tslib@^2.5.0 --save-dev

然后执行pnpm install和ng build。

内容的提问来源于stack exchange，提问作者Wajahath