@fortawesome/Angular-FontAwesome doesn't work within an Angular 6 Library

I am trying to run the Explicit reference code example within an Angular 6 library. It doesn’t compile and here are the build errors.

projects/test-lib/src/lib/font-test/font-test.component.ts(11,3): error TS4029: Public property 'faCoffee' of exported class has or is using name 'IconDefinition' from external module "c:/git/test-app/node_modules/@fortawesome/fontawesome-common-types/index" but cannot be named.

Error: projects/test-lib/src/lib/font-test/font-test.component.ts(11,3): error TS4029: Public property 'faCoffee' of exported class has or is using name 'IconDefinition' from external module "c:/git/test-app/node_modules/@fortawesome/fontawesome-common-types/index" but cannot be named.

    at Object.<anonymous> (c:\git\test-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at fulfilled (c:\git\test-app\node_modules\ng-packagr\lib\ngc\compile-source-files.js:4:58)
    at <anonymous>

Please note that it works for an application but not a library. The library is generated using the following command:

ng new test-app
cd test-app
ng generate library test-lib

Thanks

-Rushui

[devoto13]

IIRC it is a TypeScript limitation, when emitting d.ts files (i.e. declaration: true is set in the tsconfig.json). https://github.com/Microsoft/TypeScript/issues/5711 is a relevant issue. I don’t think anything is broken in the FA library, it’s just how TypeScript works.

The workaround is to add explicit type annotation to the property (which in turn ensures that there is an import statement for the required type). E.g. class MyComponent { faCoffee: IconDefinition = faCoffee }. See linked issue for more reasoning on why it is needed.

PS Looks like the issue was fixed in TypeScript 2.9.1, so just need to wait until Angular adds support for this version.

[learnuser521]

@devoto13 I have not yet updated to Angular 7, will get back if there are issues after the update. Thank you