Angular 不显示字体真棒图标答案

【问题标题】：Angular Not Display Font Awesome IconsAngular 不显示字体真棒图标
【发布时间】：2021-05-16 12:54:43
【问题描述】：

我已经安装了 font awesome 并将 FontAwesomeModule 添加到 app.module.ts 的导入中。我正在尝试向此模块中的组件添加图标，但它仍然说“fa-icon”不是已知元素：

"'fa-icon' 不是已知元素：

如果“fa-icon”是一个 Angular 组件，则验证它是否是该模块的一部分。
如果“fa-icon”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。”

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

courses.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>

courses.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 {
}

【问题讨论】：

标签： angular typescript icons font-awesome

【解决方案1】：

向 Angular 应用程序添加新框架后，您必须重新启动 Angular lite 服务器。

尝试重新启动 Angular 服务器并清除浏览器缓存。如果您使用的是 Chrome，请检查开发者工具中的“禁用缓存”。

【讨论】：

好吧，我有点怀疑，因为我在 VSCode 中看到的消息不是浏览器，但现在我可以看到页面上的图标。不过，我仍然在 VSCode 中看到了这个问题。这有什么值得担心的吗？
很可能是缓存问题。在开发前端应用程序时，我总是禁用缓存。能否请您解释一下 VSCode 中的问题？
如果错误出现在 VS Code 中，请尝试重新启动 VSCode 和 Angular lite 服务器。
如果您看到我的初始帖子，它会显示来自 VSCode 的确切错误消息。以“'fa-icon' is not a known element: ...”开头，这就是我仍然存在的错误。
安装字体真棒后重新启动VSCode并重新启动服务器已解决问题。谢谢。

【解决方案2】：

让我们尝试重新安装它，它不会花费太多时间。 https://www.npmjs.com/package/@fortawesome/angular-fontawesome

【讨论】：

刚刚重新安装，同样的问题。
您能否尝试打开上面的链接，转到“兼容性表”部分以确保您安装了基于您的 Angular 版本的合适版本
问题依然存在

【解决方案3】：

重启 VSCode 解决了我的问题。

在 cmets 中由 @anthony 提出

【讨论】：