typescript - Angular visar inte Font Awesome-ikoner

Jag har installerat Font Awesome och lagt till FontAwesomeModule i imports för app.module.ts. Jag försöker lägga till en ikon i en komponent inom detta modul och det säger fortfarande att "fa-icon" inte är ett känt element:

'fa-icon' är inte ett känt element:

  1. Om 'fa-icon' är en Angular-komponent, kontrollera då att den är en del av denna modul.
  2. Om 'fa-icon' är en webbkomponent, lägg då till 'CUSTOM_ELEMENTS_SCHEMA' till '@NgModule.schemas' för denna komponent för att undertrycka detta meddelande.

Alla svar jag ser där ute beror på att FontAwesomeModule inte är tillagt i imports i modulen som innehåller komponenten och ikonen. Detta är inte fallet och jag letar efter anledningen till varför det fortfarande inte känns igen.

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

Svar #1

När du har lagt till ett nytt ramverk i Angular-applikationen måste du starta om Angular Lite-servern.

Försök att starta om Angular-servern och rensa webbläsarens cache. Om du använder Chrome, kontrollera då alternativet "Inaktivera cache" i utvecklarverktygen.

Svar #2

Låt oss försöka installera om det, det tar inte för mycket tid. https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Relaterade artiklar