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
Top comments (0)