DEV Community

John Peters
John Peters

Posted on • Updated on

FA-ICON problems in Angular Library Projects : Root Causes and Working Example

We've run into some serious issues in attempting to import existing components into a library. The most annoying and pervasive issue is shown in this article.

Error NG8001: 'fa-icon' is not a known element.

Here's a solution on fixing these errors.

  • Make sure the library has run these commands


 npm i @fortawesome/angular-fontawesome
 // and any peer dependencies it calls out.
 npm i fortawesome/fontawesome-svg-core@^1.2.27



Enter fullscreen mode Exit fullscreen mode
  • Make sure the public-api.ts file exports these:


export * from "@fortawesome/angular-fontawesome";
export * from "@fortawesome/fontawesome-svg-core";
export * from "@fortawesome/free-regular-svg-icons";


Enter fullscreen mode Exit fullscreen mode
  • Make sure the lib.module.ts file looks like this:


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

@NgModule({
  declarations: [//components go here],
  imports: [
    FontAwesomeModule
  ],
  exports: [//components go here]
})
export class LibModule { }


Enter fullscreen mode Exit fullscreen mode

Where FontAwesomeModule is only in the imports section.

  • The package.json file for the library shows the peerDepenencies correctly


//we added the fontawesome items manually
{
  "name": "lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^9.0.7",
    "@angular/core": "^9.0.7",
    "tslib": "^1.10.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0"
  } 
}


Enter fullscreen mode Exit fullscreen mode
  • And the package.json file for the workspace includes this


//these are done by npm i at workspace folder level
"dependencies": {
    "@angular/animations": "~9.0.7",
    "@angular/common": "~9.0.7",
    "@angular/compiler": "~9.0.7",
    "@angular/core": "~9.0.7",
    "@angular/forms": "~9.0.7",
    "@angular/platform-browser": "~9.0.7",
    "@angular/platform-browser-dynamic": "~9.0.7",
    "@angular/router": "~9.0.7",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },


Enter fullscreen mode Exit fullscreen mode

A Working Github Repository Example

Root Causes for fa-icon failures in Libraries

  • Does the consumer HTML page contain components that are not there?

Alt Text

  • Can't bind to NgClass errors?

Alt Text

  • public.api.ts doesn't have at least these exports?


export * from "@fortawesome/angular-fontawesome";
export * from "@fortawesome/fontawesome-svg-core";
export * from "@fortawesome/free-regular-svg-icons";


Enter fullscreen mode Exit fullscreen mode

Now that we know the root causes, hopefully you'll be able to benefit.

JWP 2020 FA-ICON problems in Angular Library Projects

Top comments (0)