Angular13使用Font Awesome报TS2314类型参数错误

三个报错中，模块构建失败、TS类型错误是导致图标无法使用的核心阻断问题，postcss样式警告为不影响运行的非阻断提示：

• 你当前安装的@fortawesome/angular-fontawesome是面向Angular 14及以上版本构建的发布包，和Angular 13的编译环境、内部类型定义完全不兼容：Angular 14调整了内部ɵɵComponentDeclaration、ɵɵDirectiveDeclaration泛型的参数数量要求，和Angular 13的类型定义不匹配，直接触发TS2314编译错误。
• 删除node_modules重装无效的原因很简单：package.json中声明的依赖版本本身不符合兼容要求，重装只会拉取同样不兼容的包，不会解决问题。
• postcss抛出的color-adjust属性废弃提示，是Font Awesome内置样式的兼容问题，不会阻断编译、不影响图标功能，无需优先处理。

按以下步骤操作即可解决问题：

• 第一步：卸载当前不兼容的Angular适配包
  执行命令：
  npm uninstall @fortawesome/angular-fontawesome
• 第二步：安装适配Angular 13的版本
  适配Angular 13的@fortawesome/angular-fontawesome稳定版本为0.10.x分支，最高兼容版本为0.10.2，执行安装命令：
  npm install @fortawesome/angular-fontawesome@0.10.2

  注意：项目中已安装的@fortawesome/fontawesome-svg-core、@fortawesome/free-solid-svg-icons/free-regular-svg-icons/free-brands-svg-icons等图标资源包无需降级，保持现有版本即可，仅Angular框架适配包需要和项目Angular大版本匹配。

• 第三步：核对模块导入配置
  在使用图标的功能模块（通常是AppModule或项目共享模块）中，确认已正确导入FontAwesomeModule，参考配置：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [BrowserModule, FontAwesomeModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 第四步：核对组件使用方式
  在组件中使用图标前，需要先从对应图标包导入目标图标，再绑定到组件属性上，参考示例：

  import { Component } from '@angular/core';
  import { faCoffee } from '@fortawesome/free-solid-svg-icons';
  
  @Component({
    selector: 'app-root',
    template: `<fa-icon [icon]="faCoffee"></fa-icon>`
  })
  export class AppComponent {
    faCoffee = faCoffee;
  }
  

• 第五步：重启开发服务
  执行npm start或ng serve重新启动项目，之前的模块构建错误、TS类型错误会全部消失，图标可正常渲染。

• 后续如果将项目升级到Angular 14及以上版本，再将@fortawesome/angular-fontawesome升级到对应适配版本即可。
• 若要消除postcss抛出的样式废弃警告，等待Font Awesome官方更新样式文件替换废弃的color-adjust属性即可，无需手动修改node_modules内的源码，不会影响实际使用效果。

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