NullInjectorError: No provider for FaConfig

Question

使用 npm 将 angular-fontawesome 安装到 angular 应用中 in github

在开发模式下工作正常。但在生产构建中出错。

当然最初的错误是

NullInjectorError: StaticInjectorError(Do)[qm -> t]: StaticInjectorError(Platform: core)[qm -> t]: NullInjectorError: No provider for t!

必须将 angular.json 中的设置更改为

"optimization": false,
...
"buildOptimizer": true,

找出实际错误

NullInjectorError: StaticInjectorError(AppModule)[FaIconComponent -> FaConfig]: StaticInjectorError(Platform: core)[FaIconComponent -> FaConfig]: NullInjectorError: No provider for FaConfig!

我该如何解决。

该模块有

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

添加到进口

  @NgModule({
  declarations: [...],
  imports: [
    ...
    FontAwesomeModule
  ],

组件有

import { faEllipsisV, ... } from '@fortawesome/free-solid-svg-icons';

就像指南中提到的那样。

这里是依赖项

  "dependencies": {
    "@angular/animations": "~8.2.11",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.11",
    "@angular/compiler": "~8.2.11",
    "@angular/core": "~8.2.11",
    "@angular/forms": "~8.2.11",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.11",
    "@angular/platform-browser-dynamic": "~8.2.11",
    "@angular/router": "~8.2.11",
    "@fortawesome/angular-fontawesome": "^0.6.0-alpha.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "hammerjs": "^2.0.8",
    "ngx-bootstrap": "^5.2.0",
    "ngx-cookie-service": "^2.2.0",
    "ngx-webstorage-service": "^4.1.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  }

Angular版本8.3.12.

Answer 1

您需要导入很棒的库，然后在其中添加实体图标。 https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas, faEllipsisV } from '@fortawesome/free-solid-svg-icons';

library.add(fas, faEllipsisV);

Answer 2

这是最新版本 0.6.0-alpha.0 中的问题，当您不指定版本时，可能会自动安装。

https://github.com/FortAwesome/angular-fontawesome/issues/210

您可以降级到版本 0.5.0 以解决此 AOT 构建错误：

npm i @fortawesome/angular-fontawesome@0.5.0

Answer 3

此错误是由于版本更新引起的，因为此问题在 0.6.0-alpha.0 中仍然存在，请降级您的 angular font-awesome 库。

例如，通过指定正确的版本来使用此命令：

npm i @fortawesome/angular-fontawesome@0.5.0

Ps：直到 angular8 它会起作用，因为我还没有在 angular8+

上尝试过

Answer 4

降级到 0.5.0 对我有用。