本地链接Angular组件库报错：Angular13库对接Angular14主项目问题

核心原因 #

本地yarn link会让主项目直接使用UI库node_modules中的Angular核心依赖（13版本），和主项目的14版本产生冲突，这是报错的根本原因。而从npm安装时，npm会自动复用主项目的兼容依赖（你的库已配置正确的peerDependencies），所以能正常运行。

解决方案 #

1. 确保UI库的peerDependencies配置正确 #

在UI库的package.json中，将Angular核心包（@angular/core、@angular/common等）设置为peerDependencies，而非dependencies或devDependencies，示例：

"peerDependencies": {
  "@angular/core": "^13.0.0 || ^14.0.0",
  "@angular/common": "^13.0.0 || ^14.0.0"
}

配置完成后重新执行UI库构建：ng build

2. 用yalc替代yarn link（更适配本地包开发场景） #

yalc会模拟npm安装的依赖复用逻辑，避免版本冲突：

• 全局安装yalc：npm install -g yalc
• 在UI库根目录执行：yalc publish
• 在Angular14主项目根目录执行：yalc add your-ui-library-name
• UI库修改后，重新构建并执行：yalc push（自动更新所有关联项目）

3. 手动配置主项目依赖映射（临时方案） #

通过webpack别名强制主项目使用自身的Angular核心依赖：

• 安装自定义webpack构建工具：npm install @angular-builders/custom-webpack --save-dev
• 在主项目根目录创建webpack.config.js：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@angular/core': path.resolve(__dirname, 'node_modules/@angular/core'),
      '@angular/common': path.resolve(__dirname, 'node_modules/@angular/common')
    }
  }
};

• 修改angular.json的构建配置，替换为自定义webpack builder：

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

4. 统一Angular版本（终极兼容方案） #

• 将UI库升级到Angular14，与主项目版本保持一致
• 或把主项目降级到Angular13，消除版本差异

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