Karma，Angular 7和FontAwesome问题无法绑定到“ icon”，因为它不是“ fa-icon”的已知属性

Question

无法绑定到“ icon”，因为它不是“ 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();
  });
  ;
}) 

跑步者显示此错误：

失败：模板解析错误： 无法绑定到“图标”，因为它不是“ fa-icon”的已知属性。

1. 如果“ fa-icon”是Angular组件并且具有“ icon”输入，则
   确认它是该模块的一部分。
2. 如果“ fa-icon”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“ @ NgModule.schemas” 组件以禁止显示此消息。
3. 要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。这是导致问题的HTML。

我尝试在测试端导入FontAwesomeModule和FaIcon，并将其添加到TestBed配置的import语句中。我试图确保组件方面也有进口。似乎没有任何作用。

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应用程序所做的一切，以便测试能够反映前端渲染，路线，图标和管道。