Angular 不显示 Font Awesome 图标

Question

我已经安装了很棒的字体并将 FontAwesomeModule 添加到 app.module.ts 的导入中。我正在尝试向此模块中的组件添加一个图标，但它仍然表示“fa-icon”不是已知元素:
“'fa-icon' 不是已知元素:

如果 'fa-icon' 是一个 Angular 组件，那么验证它是否是这个模块的一部分。

如果 'fa-icon' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以抑制此消息。"

我看到的所有答案都是因为 FontAwesomeModule 没有添加到包含组件和图标的模块的导入中。事实并非如此，我正在寻找仍然无法识别的原因。
类(class).component.html:

<div class="course">
 <h3>{{ course.title }}</h3>
 <fa-icon icon="{{ faCoffee }}"></fa-icon>
 <p>Students: {{ course.students | number }}</p>
 <p>Rating: {{ course.rating | number: ".2-2" }}</p>
 <p>Price: {{ course.price | currency: "USD":true:".2-2" }}</p>
 <p>Release Date: {{ course.releaseDate | date: "shortDate" }}</p>
 <p>Description: <span class="desc">{{ course.description | summary }}</span></p>
 <button (click)="fullDesc()" class="btn btn-primary">Learn More</button>
</div>

course.component.ts:

import { CoursesService } from './../courses.service';
import { Component, OnInit } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {
  faCoffee = faCoffee;
  course = {
  title: "The Complete Music Course",
  rating: 4.434,
  students: 32354,
  price: 132.99,
  releaseDate: new Date(2016, 4, 1),
  description: "The Music Theory course is designed to enhance music skills and basic music fundamentals. Throughout the course of the year students will study basic notation, scales, key signatures, intervals, triads, cadences, non-chord tones, form, part-writing and analysis of a score."
}

app.module.ts:

import { SummaryPipe } from './summary.pipe';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CoursesComponent } from './courses/courses.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
declarations: [
  AppComponent,
  CoursesComponent,
  SummaryPipe
],
imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

将新框架添加到 Angular 应用程序后，您将必须重新启动 angular lite 服务器。
尝试重新启动 Angular 服务器并清除浏览器缓存。
如果您使用的是 Chrome，请检查开发人员工具中的“禁用缓存”。