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

Question

我由讲师分配给我在angular-cli.json文件中导入font-awesome，但是我使用的是angular 6，所以我在angular.json文件中初始化了字体awesome节点模块，但它无法正常工作，并且在ng服务中出错。

Answer 1

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

导入模块：

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

如果您使用的是Angular CLI，请在styles内的angular-cli.json内添加超棒的CSS

"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" />  

如果您使用了错误的命令来安装超棒的字体：

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所需的依赖项。