DEV Community

JWP
JWP

Posted on • Edited on

4 1

Angular Libraries : FontAwesome and the fa-icon problem

In this series we have discussed importing existing components into our new Angular Library.

Compiler errors are going to happen only because the AOT compiler is not the same as the JIT compiler. Many of us working in Dev. environments only use the JIT compiler.

FontAwesome Module

But one particular compile error pops up repeatedly and seems to avoid any type of fix we try.

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

ERROR: projects/angular-library/src/lib/actionItems.component.html:3:7 - error NG8001: 'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Enter fullscreen mode Exit fullscreen mode

Missing Dependencies

In an attempt to use our new 'action-items' component from our new application directory, the compiler issued a correct NG8001, as shown below. The reason was we did not export that component in our public.api.ts file. Once we did that the compile worked!

Alt Text

Why So Many

NG8001: 'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
// Followed by
NG8002: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.

Enter fullscreen mode Exit fullscreen mode

The compiler throws an exception for anything it cannot find. All error messages in this article are missing module imports. But because this is a library the install (npm i package) is done at the root layer which updates the outer package.json. Then the lib.module must be imported and then specified in the imports section of the Ngmodule.

A working example of this issue on GitHub

Summary

Remember, if you have a Test application which is attempting to use your library (during development at first) not having the proper exports in public.api.ts can cause unexpected failures.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!