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

[RushuiGuan]

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

[kirakishin]

Hello @RushuiGuan ,

i have the same problem, but i haven't any error shown.
my console shows only and nothing append :
92% chunk asset optimization UglifyJSPlugin

how do you show the error, my main tsconfig file is :

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "noStrictGenericChecks": false,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "strict": true,
    "paths": {
      "lib": [
        "dist/lib"
      ],
      "lib/*": [
        "dist/lib/*"
      ],
    }
  },
  "exclude": [
    "bazel-out",
    "dist/example-app",
    "dist/gallery",
    "node_modules",
    "**/*/node_modules",
    "modules/schematics/src/*/files/**/*"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  },
  "bazelOptions": {
    "suppressTsconfigOverrideWarnings": false
  }
}

but after many tests, it appears that my build is extremely slow (5min) when i add icon to the library..

[mlwilkerson]

The 92% thing is almost certainly caused by this known issue in the minifier used for production builds in Webpack 4. The root cause has been fixed, but not yet integrated and released in Webpack 4. We have some workarounds for you to try in the meantime.

[mlwilkerson]

@kirakishin I think my previous comment mostly addresses your scenario, based on your observation of the 92% thing.

But @RushuiGuan, your issue seems different. I don't recall whether we have any integration tests for adding this library to another Angular library. Normally our library is added to an app.

@scttcper or @devoto13: do you know what might be different or problematic in the build config with adding our Angular library to another Angular library?

[scttcper]

Looks like its coming from fontawesome-common-types. would need to see the library code as well

[RushuiGuan]

The workaround is to add import {IconDefinition } from '@fortawesome/fontawesome-common-types'; to any ts file that has icon declarations. Not ideal, but it works.

@scttcper the code below in a library will cause the compile error when the TestComponent is declared in a module.

import {faChevronRight} from '@fortawesome/free-solid-svg-icons'
import { Component } from '@angular/core';

@Component({
	selector: 'test'
 })
export class TestComponent{
	faChevronRight = faChevronRight;
}

[devoto13]

IIRC it is a TypeScript limitation, when emitting d.ts files (i.e. declaration: true is set in the tsconfig.json). microsoft/TypeScript#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.

[kirakishin]

@mlwilkerson thanks a lot! now it takes 35 sec :)

[RushuiGuan]

Thanks devoto. I will mark this as resolved.

[erdalceylan]

import { faEdit} from '@fortawesome/pro-light-svg-icons/faEdit';
import { faAddressCard} from '@fortawesome/pro-light-svg-icons/faAddressCard';

library.add(faEdit, faAddressCard);

works for me thank you @mlwilkerson

[learnuser521]

Has the issue with 92% thing been fixed or do we still have to use the workaround ?

[devoto13]

@learnuser521 It is supposed to be fixed using Angular CLI 7+ and I do not experience this issue in my applications. However another user has reported that he still experiences this problem. If you can provide a reproduction for the problem using Angular CLI 7+ we can take a look, but without reproduction it is rather hard to do something.

See #34 for more details.

[learnuser521]

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