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

• 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";

• 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 { }

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

• 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"
  },

A Working Github Repository Example

Root Causes for fa-icon failures in Libraries

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

• Can't bind to NgClass errors?

• 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";

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

JWP 2020 FA-ICON problems in Angular Library Projects