ERROR TypeError: Cannot read property 'html' of undefined (angular-fontawesome)

Question

I would like to use fontawesome in my Angular project. I would like to try out FortAwesome/angular-fontawesome , but I get an error in the browser console, if I try to use an icon:

ERROR TypeError: Cannot read property 'html' of undefined
    at FaIconComponent.ngOnChanges (webpack-internal:///../../../../@fortawesome/angular-fontawesome/@fortawesome/angular-fontawesome.es5.js:112)
    at checkAndUpdateDirectiveInline (webpack-internal:///../../../core/esm5/core.js:12576)
    at checkAndUpdateNodeInline (webpack-internal:///../../../core/esm5/core.js:14104)
    at checkAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14047)
    at debugCheckAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14940)
    at debugCheckDirectivesFn (webpack-internal:///../../../core/esm5/core.js:14881)
    at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent.ngfactory.js:154)
    at Object.debugUpdateDirectives [as updateDirectives] (webpack-internal:///../../../core/esm5/core.js:14866)
    at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14013)
    at callViewAction (webpack-internal:///../../../core/esm5/core.js:14364)

I installed @fortawesome/angular-fontawesome and the two dependencies ( @fortawesome/fontawesome-free-solid and @fortawesome/fontawesome-free-brands ) with npm

I imported it in the app.module.ts , and added it to the imports :

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

Did I miss something during the installation? I get no error on the terminal when I start the application using ng serve --open , I only get the error in the browser console.

Answer 1

I ran into the same error, only to realize that I had template values that didn't match the component names.

<button type="button" class="btn btn-default">
  <fa-icon [icon]="caretLeft"></fa-icon>
</button>

When in my component, I had

private faCaretLeft = faCaretLeft;

It was a rookie mistake that stemmed from some renaming I did trying to troubleshoot previous errors. When I changed the icon binding to the correct name, the error was resolved.

<button type="button" class="btn btn-default">
  <fa-icon [icon]="faCaretLeft"></fa-icon>
</button>