安装字体后的Angular 8白屏-在导航和页脚之间太棒了

Question

我最近安装了font-a，以便在组件上放置一些图标。一旦安装后，图标也不工作，我也失去了所有的前端视觉效果。只显示导航栏和页脚。它编译得很好。但我什么也没看到。我在http://localhost:4200/teams/1/RCB上有一个运行良好的页面，我试图把那些字体很棒的图标放到http://localhost:4200/teams/中，它是团队列表组件-html，首先我会得到一个错误，比如无法绑定到'size‘，因为它不是'fa’的已知属性。(如果我从这个有错误的html文件中删除所有代码，我会在加载到http://localhost:4200/teams/1/RCB上的主组件上看到一个空白屏幕

我试着安装和卸载字体-太棒了，它给了我更多的错误检查所有的认可，一切似乎都很好。

team-list-component.html

<div class="container pt-3">
      <div class="d-block">
        <h3 class="d-inline">Teams</h3>
        <fa class="red-icon" [size]="2" [name] = " 'plus' " [border]="false" [pull]="'right'" routerLink="/teams/add"></fa>
      </div>
      <hr>
  <div class="list-group">
    <div class="list-group-item" *ngFor="let team of teams">
      <div class="d-block">
        <h6 class="d-inline">{{ team.team }}</h6>
        <fa class="red-icon" [name] = " 'trash' " [border]="false" [pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'pencil' " [border]="false" [pull]="'right'" (click)="onEditTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'info-circle' " [border]="false" [pull]="'right'" [routerLink]="['/teams', team.id, team.team]"></fa>
      </div>
      <h6 class="text-muted">{{ team.description }}</h6>
    </div>
  </div>
</div>

team-details-component.html

<div class="container pt-3" *ngIf="team">
  <div class="d-block">
    <h3 class="d-inline">{{team.team}}'s details</h3>
  </div>
  <hr>
  <div>
    <h5>{{ team.description }}</h5>
    <div class="row">
      <div class="col-3">
        <app-dashboard-dock [border]="['border-primary']" [text]="['text-primary']" [title]="['Matches Played']" [value]="team.totalPlayed"></app-dashboard-dock>
      </div>
      <div class="col-3">
        <app-dashboard-dock [border]="['border-success']" [text]="['text-success']" [title]="['Matches Won']" [value]="team.totalWon"></app-dashboard-dock>
      </div>
      <div class="col-3">
        <app-dashboard-dock [border]="['border-danger']" [text]="['text-danger']" [title]="['Matches Lost']" [value]="team.totalLost"></app-dashboard-dock>
      </div>
      <div class="col-3">
        <app-dashboard-dock [border]="['border-warning']" [text]="['text-warning']" [title]="['No result']" [value]="team.noResult"></app-dashboard-dock>
      </div>
    </div>
  </div>
  <hr>
  <div class="d-block">
    <h5 class="d-inline">Players</h5>
  </div>
  <table class="table table-striped mt-3">
    <thead>
      <tr>
        <th scope="col">Player</th>
        <th scope="col">Mat</th>
        <th scope="col">Runs</th>
        <th scope="col">HS</th>
        <th scope="col">Ave</th>
        <th scope="col">SR</th>
        <th scope="col">Wkts</th>
        <th scope="col">Best</th>
        <th scope="col">100</th>
        <th scope="col">50</th>
        <th scope="col">4s</th>
        <th scope="col">6s</th>
        <th scope="col">CT</th>
        <th scope="col">ST</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-italic" *ngFor="let player of team.players">
        <th scope="row">
          {{ player.playerName}}
          <span class="text-small text-muted font-weight-light">({{player.preference}})</span>
        </th>
        <th class="font-weight-normal">{{ player.matchesPlayed}}</th>
        <th class="font-weight-normal">{{ player.runs }}</th>
        <th class="font-weight-normal">{{ player.highestScore }}</th>
        <th class="font-weight-normal">{{ player.average }}</th>
        <th class="font-weight-normal">{{ player.strikeRate }}</th>
        <th class="font-weight-normal">{{ player.wickets }}</th>
        <th class="font-weight-normal">{{ player.bestWicket }}</th>
        <th class="font-weight-normal">{{ player.centuries }}</th>
        <th class="font-weight-normal">{{ player.fifties }}</th>
        <th class="font-weight-normal">{{ player.fours }}</th>
        <th class="font-weight-normal">{{ player.sixes }}</th>
        <th class="font-weight-normal">{{ player.catches }}</th>
        <th class="font-weight-normal">{{ player.stumpings }}</th>
      </tr>
    </tbody>
  </table>
</div>

appmodule.ts

import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { RouterModule, Routes} from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './nav/header/header.component';
import { FooterComponent } from './nav/footer/footer.component';
import { TeamListComponent } from './teams/team-list/team-list.component';
import { TeamDetailsComponent } from './teams/team-details/team-details.component';
import { DashboardDockComponent } from './teams/dashboard-dock/dashboard-dock.component';
import { PlayersListComponent } from './players/players-list/players-list.component';
import { AddPlayerComponent } from './players/add-player/add-player.component';
import { AddTeamComponent } from './teams/add-team/add-team.component';

const appRoutes: Routes = [
  { path: '', redirectTo: '/teams', pathMatch: 'full' },

{ path: 'teams', component: TeamListComponent, children: [
    { path: ':id/:name', component: TeamDetailsComponent },
    { path: 'add', component: AddTeamComponent },
  { path: 'edit/:id', component: AddTeamComponent },
  { path: 'players', component: PlayersListComponent },
  { path: 'players/add', component: AddPlayerComponent },
  ]}

];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TeamListComponent,
    TeamDetailsComponent,
    DashboardDockComponent,
    PlayersListComponent,
    AddPlayerComponent,
    AddTeamComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,    
    FontAwesomeModule,
    RouterModule.forRoot(appRoutes),

  ],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

appcomponent.html

<div class="container-fluid">
  <app-header></app-header>
  <main role="main">
    <router-outlet> </router-outlet>
  </main>
  <app-footer></app-footer>
</div>

index.html

   <div class="container-fluid">
  <app-header></app-header>
  <main role="main">
    <router-outlet> </router-outlet>
  </main>
  <app-footer></app-footer>
</div>

错误：

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'size' since it isn't a known property of 'fa'. ("
      <div class="d-block">
        <h3 class="d-inline">Teams</h3>
        <fa class="red-icon" [ERROR ->][size]="2" [name] = " 'plus' " [border]="false" [pull]="'right'" routerLink="/teams/add"></fa>
     "): ng:///AppModule/TeamListComponent.html@3:29
Can't bind to 'name' since it isn't a known property of 'fa'. (" class="d-block">
        <h3 class="d-inline">Teams</h3>
        <fa class="red-icon" [size]="2" [ERROR ->][name] = " 'plus' " [border]="false" [pull]="'right'" routerLink="/teams/add"></fa>
      </div>
  "): ng:///AppModule/TeamListComponent.html@3:40
Can't bind to 'border' since it isn't a known property of 'fa'. ("       <h3 class="d-inline">Teams</h3>
        <fa class="red-icon" [size]="2" [name] = " 'plus' " [ERROR ->][border]="false" [pull]="'right'" routerLink="/teams/add"></fa>
      </div>
      <hr>
"): ng:///AppModule/TeamListComponent.html@3:60
Can't bind to 'pull' since it isn't a known property of 'fa'. (""d-inline">Teams</h3>
        <fa class="red-icon" [size]="2" [name] = " 'plus' " [border]="false" [ERROR ->][pull]="'right'" routerLink="/teams/add"></fa>
      </div>
      <hr>
"): ng:///AppModule/TeamListComponent.html@3:77
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
      <div class="d-block">
        <h3 class="d-inline">Teams</h3>
        [ERROR ->]<fa class="red-icon" [size]="2" [name] = " 'plus' " [border]="false" [pull]="'right'" routerLink="/te"): ng:///AppModule/TeamListComponent.html@3:8
Can't bind to 'name' since it isn't a known property of 'fa'. ("v class="d-block">
        <h6 class="d-inline">{{ team.team }}</h6>
        <fa class="red-icon" [ERROR ->][name] = " 'trash' " [border]="false" [pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        <f"): ng:///AppModule/TeamListComponent.html@10:29
Can't bind to 'border' since it isn't a known property of 'fa'. ("       <h6 class="d-inline">{{ team.team }}</h6>
        <fa class="red-icon" [name] = " 'trash' " [ERROR ->][border]="false" [pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        <fa class="green-icon" "): ng:///AppModule/TeamListComponent.html@10:50
Can't bind to 'pull' since it isn't a known property of 'fa'. (""d-inline">{{ team.team }}</h6>
        <fa class="red-icon" [name] = " 'trash' " [border]="false" [ERROR ->][pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'penci"): ng:///AppModule/TeamListComponent.html@10:67
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
      <div class="d-block">
        <h6 class="d-inline">{{ team.team }}</h6>
        [ERROR ->]<fa class="red-icon" [name] = " 'trash' " [border]="false" [pull]="'right'" (click)="onDeleteTeam(tea"): ng:///AppModule/TeamListComponent.html@10:8
Can't bind to 'name' since it isn't a known property of 'fa'. ("border]="false" [pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        <fa class="green-icon" [ERROR ->][name] = " 'pencil' " [border]="false" [pull]="'right'" (click)="onEditTeam(team)"></fa>
        <fa"): ng:///AppModule/TeamListComponent.html@11:31
Can't bind to 'border' since it isn't a known property of 'fa'. ("="'right'" (click)="onDeleteTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'pencil' " [ERROR ->][border]="false" [pull]="'right'" (click)="onEditTeam(team)"></fa>
        <fa class="green-icon" [n"): ng:///AppModule/TeamListComponent.html@11:53
Can't bind to 'pull' since it isn't a known property of 'fa'. (")="onDeleteTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'pencil' " [border]="false" [ERROR ->][pull]="'right'" (click)="onEditTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'info-ci"): ng:///AppModule/TeamListComponent.html@11:70
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [name] = " 'trash' " [border]="false" [pull]="'right'" (click)="onDeleteTeam(team)"></fa>
        [ERROR ->]<fa class="green-icon" [name] = " 'pencil' " [border]="false" [pull]="'right'" (click)="onEditTeam(te"): ng:///AppModule/TeamListComponent.html@11:8
Can't bind to 'name' since it isn't a known property of 'fa'. (" [border]="false" [pull]="'right'" (click)="onEditTeam(team)"></fa>
        <fa class="green-icon" [ERROR ->][name] = " 'info-circle' " [border]="false" [pull]="'right'" [routerLink]="['/teams', team.id, team.t"): ng:///AppModule/TeamListComponent.html@12:31
Can't bind to 'border' since it isn't a known property of 'fa'. ("right'" (click)="onEditTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'info-circle' " [ERROR ->][border]="false" [pull]="'right'" [routerLink]="['/teams', team.id, team.team]"></fa>
      </div>
"): ng:///AppModule/TeamListComponent.html@12:58
Can't bind to 'pull' since it isn't a known property of 'fa'. ("onEditTeam(team)"></fa>
        <fa class="green-icon" [name] = " 'info-circle' " [border]="false" [ERROR ->][pull]="'right'" [routerLink]="['/teams', team.id, team.team]"></fa>
      </div>
      <h6 class=""): ng:///AppModule/TeamListComponent.html@12:75
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" [name] = " 'pencil' " [border]="false" [pull]="'right'" (click)="onEditTeam(team)"></fa>
        [ERROR ->]<fa class="green-icon" [name] = " 'info-circle' " [border]="false" [pull]="'right'" [routerLink]="['/"): ng:///AppModule/TeamListComponent.html@12:8
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11188)
    at JitCompiler._parseTemplate (compiler.js:25721)
    at JitCompiler._compileTemplate (compiler.js:25709)
    at compiler.js:25653
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25653)
    at compiler.js:25566
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25565)

Answer 1

Answer 2

它应该是fa-icon，而且如果你给的是静态大小，那么就不要使用单向数据绑定。

应该是这样的：

<fa-icon class="red-icon" size="2px" [name] = " 'plus' " [border]="false" [pull]="'right'" routerLink="/teams/add"></fa-icon>