Используйте FontAwesome-Angular с модулем Angular npm для экспорта

Question

У меня есть модуль Angular 7 npm (НЕ полное приложение), который предназначен для импорта в другие проекты Angular. Мой модуль содержит верхний и нижний колонтитулы, которые могут импортировать другие приложения.

У меня проблемы с импортом модуля fontAwesome в мой модуль.

Вот мой файл ncui.module.ts (у меня нет файла app.module.ts, так как это не приложение):

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { NcuiFooterComponent } from './ncui-footer.component';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FontAwesomeModule
  ],
  declarations: [
    NcuiFooterComponent
  ],
  exports: [
    NcuiFooterComponent
  ],
  providers: [
    ...
  ]
})
export class NcuiModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: NcuiModule,
      providers: [
        ...
      ]
    };
  }
}

И мой файл footer.component.ts (сокращенно, конечно):

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

@Component({
  selector: 'ncui-footer',
  templateUrl: './ncui-footer.component.html',
  styleUrls: [
    './css/global-main.scss'
  ]
})
export class NcuiFooterComponent implements OnInit {
  faQuestionCircle = faQuestionCircle;

  constructor(private ncuiAddressService: NcuiAddressService) {}
}

И мой файл footer.component.html (только соответствующий фрагмент):

<div>
  <fa-icon [icon]="faQuestionCircle"></fa-icon>
</div>

Когда я запускаю свои тесты, я получаю эту ошибку:

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.

Есть идеи, что мне нужно сделать, чтобы импортировать FontAwesome здесь?

Answer 1

Оказывается, проблема в том, что я не импортировал его в файл spec.ts. Вот исправление:

import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NcuiFooterComponent } from './ncui-footer.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

describe('NcuiFooterComponent', () => {
  let component: NcuiFooterComponent;
  let fixture: ComponentFixture<NcuiFooterComponent>;
  let de: DebugElement;

  beforeEach(async(() => TestBed.configureTestingModule({
    declarations: [NcuiFooterComponent],
    imports: [
      FontAwesomeModule
    ]
  }).compileComponents()));

  ...

});