Проблема Karma, Angular 7 и FontAwesome Невозможно привязать к значку, поскольку оно не является известным свойством fa-icon

Question

Невозможно выполнить привязку к значку, поскольку это не известное свойство fa-icon.

При попытке запустить этот тест в people.component.spec.ts

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";



describe("PeopleComponent Unit Test", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PeopleComponent]
    })
      .compileComponents();
  }));


  beforeEach(() => {
    fixture = TestBed.createComponent(PeopleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it("should create", () => {
    expect(component).toBeTruthy();
  });
  ;
}) 

Бегун показывает эту ошибку:

Failed: Ошибка разбора шаблона: Невозможно привязать к значку icon, так как это не известное свойство fa-icon.

1. Если 'fa-icon' является угловым компонентом и имеет ввод 'icon', тогда
   убедитесь, что он является частью этого модуля.
2. Если 'fa-icon' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонент для подавления этого сообщения.
3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ NgModule.schemas» этого компонента. Это HTML-код, вызывающий проблему.

Я попытался импортировать FontAwesomeModule и FaIcon на тестовой стороне и добавить в оператор импорта конфигурации TestBed. Я пытался убедиться, что компонент сторона имеет импорт тоже. Ничто не похоже на работу.

Answer 1

Нашли решение: в configureTestingModule вы должны правильно использовать объявления, поставщиков и импорт.Когда это было сделано, как показано ниже, например, провайдер appmodel, даже стиль был обнаружен в тесте Jasmine.

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { DisplayNamePipe } from "src/app/extensions/pipes.format.person.display-name";
import { RouterModule } from "@angular/router";
import { SSNFormatPipe } from "src/app/extensions/pipes.format.ssn";
import { AppModule } from "src/app/app.module"; 
import { RestangularModule } from "ngx-restangular";




describe("PeopleComponent", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PeopleComponent, FaIconComponent, DisplayNamePipe,   SSNFormatPipe ],
      providers: [AppModule],
      imports:[ RestangularModule.forRoot(), RouterModule.forRoot([])]
    })
      .compileComponents();
  }));


  beforeEach(() => {
    fixture = TestBed.createComponent(PeopleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it("should create", () => {
    expect(component).toBeTruthy();
  });
  ;
}) 

Это научило меня, что Конфигурация модуля должна включать все, что приложение Angular 7 делает длятест для отображения внешнего рендеринга, маршрутов, значков и каналов.