fa-icon не является известным элементом в модуле многократного использования

Question

Не уверен, почему это происходит на модуле многократного использования (или в том, что Iv'e ошибся).

Ошибка ОШИБКИ: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: 'fa-icon 'не является известным элементом

К вашему сведению: fa-icon является элементом Font Awesome

toolbar-fab.component.html:

<button
    mat-mini-fab
    class="mat-mini-fab mat-accent"
    routerLink="{{ fabLink }}">
  <fa-icon icon="{{ fabIcon }}"></fa-icon>
</button>

toolbar-fab.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-toolbar-fab',
  templateUrl: './toolbar-fab.component.html',
  styleUrls: ['./toolbar-fab.component.scss']
})
export class ToolbarFabComponent {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

toolbar-fab.module.ts:

import { Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { ToolbarFabComponent } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.component';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons';

library.add(faPlus);

@NgModule({
  imports: [
    CommonModule,
    FontAwesomeModule,
    RouterModule
  ],
  declarations: [
    ToolbarFabComponent
  ],
  exports: [
    ToolbarFabComponent
  ]
})

export class ToolbarFabModule {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

airframe-list.component.html

. . .
<app-toolbar-fab
  [fabIcon]="fabIcon"
  [fabLink]="fabLink">
</app-toolbar-fab>
. . .

airframe-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-airframe-list',
  templateUrl: './airframe-list.component.html',
  styleUrls: ['./airframe-list.component.scss']
})
export class AirframeListComponent implements OnInit {

  fabIcon = 'plus';
  fabLink = '/inventory/add-airframe';

  ngOnInit() {
  }
}

airframe-list.module.ts

import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

import { MaterialModule } from '@app/shared/material.module';

import { AirframeListRoutingModule } from '@app/modules/inventory/airframes/airframe-list-routing.module';
import { AirframeListComponent } from '@app/modules/inventory/airframes/pages/airframe-list/airframe-list.component';
import { ToolbarFabModule } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.module';

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    MaterialModule,
    ToolbarFabModule,
    TranslateModule,
    AirframeListRoutingModule
  ],
  declarations: [AirframeListComponent],
})
export class AirframeListModule {
}

Благодарим Вас за помощь!

Answer 1

Я думаю, что это относится к FontAwesome, потому что мой оригинальный метод работает как компонент (почему ??).

// Originally
<fa-icon icon="{{ fabIcon }}"></fa-icon>

// Change too
<fa-icon [icon]="fabIcon"></fa-icon>