Angular 6中index.html内Font Awesome图标无法显示求助

嘿，刚接触Angular遇到这种问题太正常了，我来帮你捋清楚原因和解决办法：

问题根源 #

你在src/index.html里用了<fa-icon>标签，但这个标签是Angular专属组件，只有当Angular应用完全初始化后，才能识别并渲染它。而你设置的加载器是在Angular启动前的初始阶段显示的，这时候Angular还没开始工作，自然解析不了<fa-icon>，图标也就没法显示啦。

解决方案 #

这里有两种简单有效的处理方式：

方法一：用纯HTML/CSS的Font Awesome图标（推荐，适配初始加载阶段） #

既然初始加载时Angular还没启动，我们可以直接用Font Awesome的传统CSS类方式来显示图标，完全不依赖Angular组件：

1. 先在src/index.html的<head>标签里引入对应版本的Font Awesome CSS文件（Angular 6搭配的@fortawesome/angular-fontawesome一般对应Font Awesome 5.x）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

2. 把index.html里的<fa-icon>代码替换成普通的<i>标签，用Font Awesome的类名：

<div class="logo"><i class="fab fa-angular"></i></div>

这样静态HTML就能直接渲染出图标，不用等Angular初始化完成。

方法二：把加载器移到Angular组件内（适合应用启动后的加载状态） #

如果你希望加载器由Angular控制，可以把加载逻辑放到AppComponent里：

1. 在app.component.html里添加加载器代码，这时候就能正常使用<fa-icon>组件了：

<div *ngIf="isLoading" class="app-loading">
  <div class="logo"><fa-icon [icon]="['fab', 'angular']"></fa-icon></div>
  <svg class="spinner" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>
<!-- 应用内容区域 -->
<ng-container *ngIf="!isLoading">
  <!-- 原来的应用内容代码 -->
</ng-container>

2. 在app.component.ts里添加状态变量，在组件初始化完成后切换状态：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'abe-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isLoading = true;

  ngOnInit() {
    // 可以替换成实际的加载完成逻辑，比如接口请求结束
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);
  }
}

不过这种方式的加载器是Angular启动后才显示的，可能会有短暂的页面空白，所以如果要完全覆盖Angular启动前的空白，还是方法一更合适。

额外说明 #

你的app.module.ts配置是完全正确的，这个配置是给Angular组件内部使用<fa-icon>准备的，没问题~

内容的提问来源于stack exchange，提问作者Charles L.