如何在Angular项目中导入PNPM Monorepo本地TypeScript包？

我正尝试将Angular项目集成到以React应用为主的PNPM工作区Monorepo中，目录结构如下：

|-apps
|  |-react-app
|  |  |-package.json
|  |
|  |-angular-app (new)
|    |-package.json
|
|-packages
|  |-shared
|     |-index.ts
|     |-package.json
|
|-package.json
|-pnpm-workspace.yaml

共享包名称为@my-app/shared，其package.json中配置了"main": "index.ts"。

在react-app中，安装该本地包后可直接通过import { someValue } from '@my-app/shared';使用，调整Webpack配置后能正确打包共享模块。但在Angular应用中，虽能正常安装包，运行开发服务器时@my-app/shared未被打包到bundle中，仅显示占位符。导入代码如下：

import { value } from '@my-app/shared';
console.log('xxx', value);

我仅需使用该包中的简单TypeScript工具函数，无需通过ng generate library创建Angular库，请教如何配置让Angular正确导入并打包本地共享包？

以下是几种可行的配置方式，按推荐顺序尝试：

1. 启用软链接保留（Preserve Symlinks） #

PNPM对本地工作区包使用软链接，Angular默认会将软链接的包视为外部依赖而跳过打包。在angular.json中为Angular应用的build和serve配置添加preserveSymlinks: true：

"projects": {
  "angular-app": {
    "architect": {
      "build": {
        "options": {
          // 其他现有配置
          "preserveSymlinks": true
        }
      },
      "serve": {
        "options": {
          // 其他现有配置
          "preserveSymlinks": true
        }
      }
    }
  }
}

2. 在TypeScript配置中添加路径映射 #

修改Angular应用的tsconfig.json（或tsconfig.app.json），通过paths直接映射到共享包的本地路径，让TypeScript跳过node_modules软链接直接解析源文件：

"compilerOptions": {
  // 其他现有配置
  "paths": {
    "@my-app/shared": ["../../packages/shared/index.ts"]
  }
}

3. 让Angular编译共享包源码 #

如果共享包是未编译的TypeScript文件，Angular默认不会编译node_modules中的TS文件。可在Angular应用的tsconfig.app.json的include数组中添加共享包的路径，将其纳入项目编译范围：

"include": [
  "src/**/*",
  "../../packages/shared/**/*"
]

补充：完善共享包的package.json配置 #

为了更好地兼容TypeScript和Angular构建器，建议在@my-app/shared的package.json中补充以下字段：

{
  "main": "index.ts",
  "types": "index.ts", // 提供TypeScript类型入口
  "type": "module" // 声明为ES模块（可选，根据项目模块系统调整）
}

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