Angular6升级至15后Angular2FontawesomeModule报NG6002错误求助

问题根源 #

angular2-fontawesome库已停止维护，最后更新于2018年，仅支持到Angular 6，完全不兼容Angular 9+默认启用的Ivy编译器，因此升级到Angular 15后会触发NG6002错误，无法通过修改导入路径解决。

解决方案：替换为官方Font Awesome Angular库 #

1. 卸载旧库
   执行命令移除不兼容的旧库：

   npm uninstall angular2-fontawesome
   # 若使用Yarn则执行：
   # yarn remove angular2-fontawesome
   

2. 安装官方依赖
   安装官方维护的Font Awesome Angular库及核心依赖，按需添加图标包（示例为免费实心图标包，若需其他风格可补充安装）：

   npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
   # 如需常规风格图标：
   # npm install @fortawesome/free-regular-svg-icons
   # 如需品牌图标：
   # npm install @fortawesome/free-brands-svg-icons
   

3. 更新AppModule配置
   替换原Angular2FontawesomeModule为官方FontAwesomeModule，可选全局注册常用图标（或后续在组件中按需导入）：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   // 可选：全局注册图标
   import { library } from '@fortawesome/fontawesome-svg-core';
   import { faCoffee, faUser } from '@fortawesome/free-solid-svg-icons';
   
   library.add(faCoffee, faUser);
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, FontAwesomeModule], // 替换旧模块
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. 修改模板与组件代码
   原模板中的<fa>标签需替换为官方<fa-icon>组件，图标引用方式调整：

   • 若全局注册图标，可直接使用图标名称数组：

     <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
     

   • 若组件级按需导入，先在组件中引入图标再绑定：

     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;
     }
     

5. 验证运行
   执行ng serve启动项目，确认错误消失且图标正常渲染。

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