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.
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!
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.
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)