Angular6升级11后angular-font-awesome报Renderer未在@angular/core找到

这个报错基本和你升级时调整的tsconfig、构建配置没有复杂关联，核心是依赖版本完全断层：

• 当前项目里安装的angular-font-awesome是早已停止维护的第三方老库，它的源码里直接从@angular/core导入了Renderer类
• Renderer这个API从Angular 6时代就被官方标记为废弃，从Angular 9版本开始，官方已经将这个类从@angular/core的公开导出列表中彻底移除，替换为长期稳定的Renderer2
• 升级到Angular 11后，新版@angular/core里根本不存在名为Renderer的公开导出，打包工具自然会抛出“找不到对应导出”的构建错误

• 执行npm ls angular-font-awesome确认本地安装的包版本：这类遗留依赖基本是随原Angular 6项目带过来的，版本普遍在6.x及以下，该库最后一个发布版本最高仅适配到Angular 8，完全不兼容Angular 9及以上的版本
• 执行npm ls @angular/core确认所有Angular生态包的版本已经全部对齐到11.x，排除升级过程中残留的旧版Angular子包导致的偶发版本不一致问题

• 长期推荐方案：替换为官方持续维护的Font Awesome Angular集成包
  先卸载停止维护的旧依赖：npm uninstall angular-font-awesome
  安装适配Angular 11的版本系列（0.8.x版本区间）的官方Font Awesome Angular依赖，以及配套的图标资源包。安装完成后，将项目中所有使用旧库的组件代码，按照新库的API语法做替换。这个方案没有长期维护风险，是跨大版本升级场景下的标准做法。
• 过渡适配方案：本地打补丁临时兼容
  如果短期不想大规模调整业务组件代码，可以用patch-package工具对本地的angular-font-awesome包做最小改动绕过报错：
  • 打开报错指向的文件node_modules/angular-font-awesome/dist/angular-font-awesome.js，定位到导入Renderer的代码行，将导入语句中的Renderer替换为Renderer2
  • 全局替换库文件中所有对Renderer类的引用为Renderer2，由于两个类的核心方法命名高度重合，绝大多数场景下修改后图标渲染逻辑可以正常运行
  • 通过patch-package将该修改固化到项目补丁文件中，避免每次重新安装依赖后改动失效
• 应急兜底方案：打包时做空导出占位
  如果只是临时需要跑通构建流程，可以在打包配置中为这个缺失的导出做空实现占位，把Renderer映射成一个空类注入到@angular/core的导出中。这种方式很可能导致图标渲染功能异常，仅适合临时验证流程，不建议长期使用。

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