26

I am using ngx-share's Share Button Directive in my project. However, I can't seem to be able to use the icons. If I try to use icons like this:

<button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
  <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>

What I get is the following error:

Uncaught Error: Template parse errors:
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.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("on mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    <fa-icon [ERROR ->][icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:13
'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. ("

  <button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    [ERROR ->]<fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:4
    at syntaxError (compiler.js:486)
    at TemplateParser.parse (compiler.js:24674)
    at JitCompiler._parseTemplate (compiler.js:34629)
    at JitCompiler._compileTemplate (compiler.js:34604)
    at eval (compiler.js:34505)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34505)
    at eval (compiler.js:34375)
    at Object.then (compiler.js:475)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)

How can I fix this issue?

I added ShareModule to the list of imports:

@NgModule({
  imports: [
    //..
    ShareModule.forRoot()
  ]
})

My component also injects the ShareButtons object as required:

export class GroupComponent {    
  constructor(public share: ShareButtons) {
  }
}
Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
  • Which library is fa-icon part of? You need to import corresponding module – David Apr 28 '18 at 11:38
  • @David I don't know - I just follow the instructions on the website assuming that's all I have to do. Apparently the whole thing messes not with the compilation but introduces some other issues. After installing the packages auto-reloading (auto-compilation) does not work anymore. I have to remove the packages in order to make it work again .. – Stefan Falk Apr 28 '18 at 11:43
  • Can you share the link with the fa-icon example? – David Apr 28 '18 at 11:52
  • @David Of course: [Take a look](https://murhafsousli.github.io/ngx-sharebuttons/#/share-button-directive). – Stefan Falk Apr 28 '18 at 11:56
  • Now I get `Template parse errors: 'fa-icon' is not a known element` – tjvg1991 Dec 19 '18 at 04:04

3 Answers3

32

Edit You can also import the ShareButtonModule which already exports the FontAwesomeModule.

Original answer

Assuming you've already installed the font awesome npm package, you need to add FontAwesomeModule to your module's imports

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

@NgModule({
 //...
imports: [
     //...
   FontAwesomeModule
  ],
})
export class AppModule { }

See example here

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
David
  • 33,444
  • 11
  • 80
  • 118
  • 4
    Interesting - the moment I am installing this, auto-reloading breaks. If I make changes to the HTML, the projects does not get compiled anymore and the site is not getting refreshed... – Stefan Falk Apr 28 '18 at 12:05
  • Any error? In console or in browser? Make sure you restart ng serve too if you installed anything – David Apr 28 '18 at 12:06
  • That's the best part and I think that's the reason why I might not have noticed the share buttons did already work earlier because I tried to install this module already. I am not getting an error or anything. I am killing `ng` and restart it `ng serve --host 0.0.0.0` - it's just not doing anything anymore. – Stefan Falk Apr 28 '18 at 12:09
  • Since this solves the issues with ngx-share I'm going to accept this answer and open another one about the auto-reloading issue. [Take a look](https://stackoverflow.com/questions/50076487/why-does-fortawesome-angular-fontawesome-break-auto-compilation) if you're interested. And thanks btw. – Stefan Falk Apr 28 '18 at 12:22
  • So ng serve compiles the code correctly though? Without error message there is not much I can do. But that original error you got definitely means that you are missing the fontawesome module – David Apr 28 '18 at 12:23
  • Yes, it's getting compiled. No problem there. Only the auto-compile breaks :/ – Stefan Falk Apr 28 '18 at 12:24
1

You need to import ShareButtonsModule in the module where you are using these share buttons.

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    ShareButtonsModule.forRoot()
  ]
})
Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
FAISAL
  • 33,618
  • 10
  • 97
  • 105
0

In my case I had multiple modules in my angular app. I was importing it in app-module and using font awesome icon in other module, that was the issue, Importing it in the correct module file fixed the issue.

Ahmad Nku
  • 1
  • 1