在 Angular 6 版本中通过 angular-cli.json 导入 font-awesome？

Question

教师分配我在 angular-cli.json 文件中导入 font-awesome，但我使用的是 angular 6，所以我在 angular.json 文件中初始化了 font awesome 节点模块，但它不工作并且在 ng serve 中出错。

Answer 1

安装包npm install --save font-awesome angular-font-awesome

导入模块：

//...
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

如果您使用的是 Angular CLI，请将 font-awesome CSS 添加到 styles 内的 angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

注意：如果使用 SCSS 预处理器，只需将 css 更改为 scss

如果您不使用 CLI，请将样式表导入您的 index.html 文件

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  

如果你使用了错误的命令来安装 font-awesome：

1. 删除从package.json安装的依赖项
2. 手动删除node_modules 文件夹。
3. 运行npm cache clean --force
4. 运行npm install
5. 并执行我上面提到的步骤。

Answer 2

来自https://www.npmjs.com/package/@fortawesome/angular-fontawesome：

npm install –save '@fortawesome/angular-fontawesome' 

npm install –save ‘@fortawesome/fontawesome-svg-core' 

npm i --save '@fortawesome/free-solid-svg-icons'

请记住，该指南没有提到必须运行最后两个命令，但它们是 Font Awesome 所需的依赖项。