Angular 9 + FontAwesome 0.6：“错误 NG8001：'fa-icon' 不是已知元素”

Question

我在尝试使用 fontawesome 图标时遇到了问题。我已经在我的项目中安装了带有命令行的 FontAwesome：

ng add @fortawesome/angular-fontawesome@latest

我有一个子模块，我想在其中使用“fas”->“images”图标。所以，我创建了我的子模块：

import { PhotoListComponent } from './photo-list.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  declarations: [
    PhotoListComponent
  ],
  imports: [
    CommonModule,
    FontAwesomeModule
  ]
})
export class PhotoListModule {
  constructor() {
    library.add(fas);
  }
}

我在这个子模块中有一个组件（photo-list.component.ts 和 photo-list.component.html）。在它的 HTML 文件中，我只是将这一行放在我的标题中显示图标：

<h1><fa-icon [icon]="['fas','images']"></fa-icon> Images</h1>

当我运行我的 Angular 项目并打开此模块时，出现以下错误（并且图标确实显示）：错误 NG8001：'fa-icon' 不是已知元素

为什么不起作用？

Answer 1

我检查了代码：fontawesome 有一些变化，现在必须正确导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { FontAwesomeModule, FaIconLibrary  } from '@fortawesome/angular-fontawesome';

import { faCoffee, fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
    library.addIcons(faCoffee);
  }
}

根据您的代码查看工作示例：https://stackblitz.com/edit/angular-5qu1fy

Answer 2

我知道这是一个老问题，但如果有人使用 Angular Material，我想添加一些信息。 根据他们的文档https://github.com/FortAwesome/angular-fontawesome。只需在你的材料模块中导入fontawesome，然后在任何组件中使用它并在html中绑定属性，比如;

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    
@NgModule({
  imports: [FontAwesomeModule]
})
export class MaterialModule {}

//any component
import { faGoogle } from '@fortawesome/free-brands-svg-icons';

googleIcon = faGoogle;

//html
<fa-icon [icon]="googleIcon"></fa-icon>

Answer 3

升级到 Angular 13 后，这种情况开始发生，但以上没有任何效果。 对我有用的是进入 Angular 语言服务 扩展设置并检查 Angular: View Engine 选项