web-dev-qa-db-fra.com

Impossible de se lier à 'icône' car ce n'est pas une propriété connue de 'fa-icon'

J'utilise la directive du bouton de partage ngx-share dans mon projet. Cependant, je n'arrive pas à utiliser les icônes. Si j'essaie d'utiliser des icônes comme celle-ci:

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

Ce que je reçois est l'erreur suivante:

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)

Comment puis-je résoudre ce problème?

J'ai ajouté ShareModule à la liste des importations:

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

Mon composant injecte également l'objet ShareButtons selon les besoins:

export class GroupComponent {    
  constructor(public share: ShareButtons) {
  }
}
angularngx-share
4
displayname

Edit Vous pouvez également importer le ShareButtonModule qui exporte déjà la FontAwesomeModule. 

Réponse originale

En supposant que vous ayez déjà installé le paquet font awesome npm, vous devez ajouter FontAwesomeModule aux importations de votre module.

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

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

Voir exemple ici

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

3
David

Vous devez importer ShareButtonsModule dans le module où vous utilisez ces boutons de partage.

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

@NgModule({
  imports: [
    ShareButtonsModule.forRoot()
  ]
})
0
Faisal