typescript - Angular viser ikke Font Awesome-ikoner

Jeg har installert Font Awesome og lagt til FontAwesomeModule i imports for app.module.ts. Jeg prøver å legge til et ikon i en komponent innenfor denne modulen, og det står fortsatt at "fa-icon" ikke er et kjent element:

'fa-icon' er ikke et kjent element:

  1. Hvis 'fa-icon' er en Angular-komponent, må du kontrollere at den er en del av denne modulen.
  2. Hvis 'fa-icon' er en webkomponent, legg til 'CUSTOM_ELEMENTS_SCHEMA' i '@NgModule.schemas' for denne komponenten for å undertrykke denne meldingen.

Alle svarene jeg ser der ute er fordi FontAwesomeModule ikke er lagt til i importene til modulen som inneholder komponenten og ikonet. Dette er ikke tilfelle, og jeg leter etter grunnen til hvorfor det fortsatt ikke blir gjenkjent.

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 legger til et nytt rammeverk i Angular-applikasjonen, må du starte Angular Lite-serveren på nytt.

Prøv å starte Angular-serveren på nytt og tømme nettleserens cache. Hvis du bruker Chrome, sjekk deretter 'Deaktiver cache' i utviklerverktøyene.

Svar #2

La oss prøve å installere det på nytt, det tar ikke for mye tid. https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Relaterte artikler