如何构建可兼容Angular8/10/12多版本项目的Angular公共组件库

你遇到的报错是因为 ɵɵFactoryTarget 是Angular 12才新增的内部核心API，你基于Angular 12构建的库产物默认调用了该API，而Angular 8、10的@angular/core包中没有导出这个符号，因此直接抛出导入错误。

• 是否需要为Angular 8、10、12分别开发三套独立的公共库代码？
  • 不需要，同一份代码可通过适配兼容三个版本，但必须针对不同大版本分别构建对应产物，不存在能同时跑在三个版本的单一构建产物——Angular大版本之间的内部API不做向下兼容，高版本编译的库产物无法直接运行在低版本Angular项目中。
• 是否有办法仅构建一个版本的公共库，同时供三个版本的项目接入？
  • 若你的公共库没有用到Angular 9+新增的特性（如Ivy专有API、strictTemplates独有语法等），可以选择基于最低兼容版本Angular 8构建，这一份构建产物可以同时运行在Angular 8、10、12项目中，因为Angular对低版本编译的库做了向上兼容。

方案1：单版本构建（轻量选择） #

适合公共库功能简单，不需要用到Angular 9+新特性的场景：

1. 将公共库的开发环境降级到Angular 8，确保所有依赖的Angular包版本为8.x
2. 关闭Ivy编译（Angular 8中Ivy为实验特性，默认用ViewEngine即可），使用对应版本的ng-packagr构建库产物
3. 在库的package.json中注明peer依赖范围：

{
  "peerDependencies": {
    "@angular/core": "^8.0.0 || ^10.0.0 || ^12.0.0",
    "@angular/common": "^8.0.0 || ^10.0.0 || ^12.0.0"
  }
}

该方案构建的单份产物即可兼容所有目标版本。

方案2：多版本并行构建（推荐） #

适合公共库需要用到不同版本Angular新特性，追求不同版本项目下的最优性能的场景：

1. 维护同一套代码仓库，通过分支管理或者条件编译处理不同版本的差异逻辑
2. 配置多套构建环境，分别安装对应版本的Angular依赖，依次构建出8.x、10.x、12.x三个版本的库产物
3. 发布时按照大版本号区分，例如@your/common-lib@8.x对应Angular 8项目，@your/common-lib@12.x对应Angular 12项目，业务项目按需安装对应大版本的依赖即可

• 不要开启Angular 12的Partial Ivy编译模式，该模式产出的产物仅支持Angular 12及以上版本，完全不兼容低版本
• 若使用Angular 8构建，必须用ViewEngine编译，不要开启实验性的Ivy，否则会出现兼容问题

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