使用Npm Workspaces构建Monorepo时Angular导入Shared类报错

问题场景 #

使用Npm Workspaces构建Monorepo项目，结构如下：

- package.json
- tsconfig.json
- tsconfig.base.json
-- packages/
--- frontend/ # Angular应用
--- backend/
---- package.json
---- tsconfig.json
--- shared/
---- package.json
---- tsconfig.json

Angular应用中导入@my-app/shared/src/models/app-settings.model.ts的AppSettings类并实例化时，浏览器控制台报错：

ERROR TypeError: _my_app_shared__WEBPACK_IMPORTED_MODULE_0__.AppSettings is not a constructor

后端（Node.js + Express）可正常实例化该类，问题集中在Angular端配置。

核心原因 #

1. Angular的TypeScript模块解析策略与shared包的NodeNext配置不兼容
2. shared包缺少明确的导出配置，Angular无法正确识别模块入口
3. Angular未正确处理本地Monorepo包的路径解析

解决步骤 #

1. 完善shared包的package.json配置 #

在packages/shared/package.json中添加模块入口和导出规则，确保Angular能找到构建后的产物：

{
  "name": "@my-app/shared",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./src/*": "./dist/*"
  },
  "scripts": {
    "build": "tsc"
  }
}

同时在shared/src下创建index.ts统一导出模块：

// shared/src/index.ts
export { AppSettings } from './models/app-settings.model';

2. 统一Angular的TypeScript模块配置 #

修改packages/frontend/tsconfig.json的compilerOptions，对齐shared包的模块策略，并添加路径映射：

"compilerOptions": {
  // 保留原有配置，修改/添加以下项
  "module": "NodeNext",
  "moduleResolution": "NodeNext",
  "target": "ES6",
  "paths": {
    "@modules/*": ["app/modules/*"],
    "@shared/*": ["app/shared/*"],
    "@environment": ["environments/environment.ts"],
    "@my-app/shared": ["../shared/src"],
    "@my-app/shared/*": ["../shared/src/*"]
  }
}

3. 构建shared包 #

在项目根目录执行命令，构建shared包生成dist产物：

npm run build --workspace=@my-app/shared

也可在根package.json添加快捷脚本：

"scripts": {
  "build:shared": "npm run build --workspace=@my-app/shared"
}

之后运行npm run build:shared即可。

4. 修正Angular中的导入路径 #

使用规范的包名导入（推荐），替换原有的具体文件路径导入：

// 替换之前的导入语句
import { AppSettings } from "@my-app/shared";

5. 配置Angular构建的符号链接保留 #

修改packages/frontend/angular.json，在projects.frontend.architect.build.options中添加：

"options": {
  // 其他已有配置
  "preserveSymlinks": true
}

该配置确保Angular正确解析Monorepo中的本地包路径。

验证 #

重新构建shared包，启动Angular应用，实例化AppSettings类即可正常运行。

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