Yarn Workspaces下Angular与React共享代码异常问题求助

问题 #

用Yarn Workspaces搭建了monorepo，包含三个包：react-app、angular-app、shared（package.json名称为@monorepo/shared）。angular-app和react-app都依赖@monorepo/shared，react端能正常导入使用，但在angular的app.component.ts中导入共享包的函数时，函数始终返回undefined。

现象说明：webpack似乎未正确加载外层node_modules里的@monorepo/shared。如果共享包内存在编译错误，angular会抛出错误，但导入后的函数仍返回undefined。

环境信息：

Angular CLI: 15.1.6
Node: 16.19.0
Package Manager: yarn 1.22.19
@angular-devkit/architect       0.1002.4
@angular-devkit/build-angular   15.1.6
@angular-devkit/core            10.2.4
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

尝试过用@angular-builders/custom-webpack@10.0.1添加自定义构建器，但触发错误：

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "/private/var/folders/_w/fdf/T/ng-wddfdNDWy/angular-errors.log" for further details.

求问如何配置Angular应用，让它正确加载外层node_modules中的@monorepo/shared？

解决方案 #

1. 修正共享包的package.json配置 #

在@monorepo/shared的package.json中，必须明确指定入口文件、类型声明路径及包含文件：

{
  "name": "@monorepo/shared",
  "main": "dist/index.js", // 编译后入口路径，若直接用源码则改为"src/index.js"
  "types": "dist/index.d.ts", // 类型声明文件路径
  "files": [
    "dist", // 确保编译产物被包含
    "src" // 若直接使用未编译的TS源码，需添加此目录
  ]
}

如果共享包是TypeScript编写，需确保已完成编译，或后续配置允许Angular直接编译其源码。

2. 配置Angular的tsconfig.json #

在angular-app的tsconfig.json中，添加路径映射和源码包含规则，让TypeScript正确解析共享包：

{
  "compilerOptions": {
    // 保留原有配置
    "baseUrl": "./",
    "paths": {
      "@monorepo/shared": ["../shared/src"] // 指向共享包源码目录，或dist编译目录
    },
    "include": [
      "src/**/*",
      "../shared/src/**/*" // 让Angular编译器处理共享包源码
    ]
  }
}

3. 调整Angular的angular.json构建配置 #

在angular-app的angular.json中，修改构建选项以兼容monorepo依赖：

{
  "projects": {
    "angular-app": {
      "architect": {
        "build": {
          "options": {
            // 保留原有配置
            "preserveSymlinks": true, // 保留符号链接，避免路径解析异常
            "allowedCommonJsDependencies": [
              "@monorepo/shared" // 允许共享包作为CommonJS依赖处理
            ]
          }
        },
        "serve": {
          "options": {
            "preserveSymlinks": true // dev-server同样启用此选项
          }
        }
      }
    }
  }
}

4. 修复自定义webpack构建器版本兼容问题 #

之前使用的@angular-builders/custom-webpack@10.0.1与Angular 15版本不匹配，需安装对应版本：

yarn add -D @angular-builders/custom-webpack@15.x.x

随后修改angular.json中的构建器配置：

{
  "projects": {
    "angular-app": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
        }
      }
    }
  }
}

若需自定义webpack解析规则，在webpack.config.js中添加别名：

module.exports = {
  resolve: {
    alias: {
      '@monorepo/shared': require('path').resolve(__dirname, '../shared/dist')
    }
  }
};

5. 清除缓存并重新构建 #

执行以下命令清除旧缓存与构建产物，重新安装依赖并构建：

yarn cache clean
rm -rf angular-app/node_modules angular-app/dist shared/dist
yarn install
yarn build shared
yarn start angular-app

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