vscode 假错误：\'fa-icon\' 不是已知元素答案

【问题标题】：vscode fake error: 'fa-icon' is not a known elementvscode 假错误：\'fa-icon\' 不是已知元素
【发布时间】：2023-02-10 01:59:29
【问题描述】：

我在使用 vscode 时遇到问题，出现错误：

'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng

但是我已经将它导入到模块“app.module”中，并且这个组件（称为“base”）是根模块的一部分。

这个问题只出现在 vscode 中，应用程序运行没有任何错误。

代码：

基础.component.ts:

import { Component } from '@angular/core';
import { faFacebook, faInstagram, faTelegram } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.scss']
})
export class BaseComponent {

  facebook = faFacebook;
  instagram = faInstagram;
  telegram = faTelegram;

}

基础.component.html：

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand">
      Quiz App
    </a>
    <div class="text-light float-end fs-5">
      <a href="#"><fa-icon class="text-light p-1" [icon]="facebook"></fa-icon></a>
      <a href="#"><fa-icon class="text-light p-1" [icon]="instagram"></fa-icon></a>
      <a href="#"><fa-icon class="text-light p-1" [icon]="telegram"></fa-icon></a>
    </div>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

应用程序模块.ts：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BaseComponent } from './base/base.component';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { HomeComponent } from './views/home/home.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent,
    BaseComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

潜在修复：为 base.component 创建一个模块并将其导入 app.module 并在 imports [] 中列出。
@MishaMashina 我试过了，但没用

标签： angular typescript visual-studio-code font-awesome

【解决方案1】：

添加这个怎么样？

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

【讨论】：

这是一个有角度的应用程序

【解决方案2】：

重新启动 VS 代码后，这些错误就消失了。

【讨论】：