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

Posted 2023-03-16

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

【英文标题】：Karma, Angular 7, & FontAwesome issue Can't bind to 'icon' since it isn't a known property of 'fa-icon'

【发布时间】：2019-09-15 07:33:23

【问题描述】：

无法绑定到“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();
  );
  ;
) 

跑步者显示此错误：

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

如果“fa-icon”是一个 Angular 组件并且它有“icon”输入，那么 验证它是该模块的一部分。 如果“fa-icon”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 组件来禁止显示此消息。 要允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。这是导致问题的 html。

我尝试在测试端导入 FontAwesomeModule 和 FaIcon 并添加到 TestBed 配置的导入语句。我试图确保组件端也有导入。似乎没有任何效果。

【问题讨论】：

你看过***.com/a/50076329/9941039

如果 'fa-icon' 是一个 Angular 组件并且它有 'icon' 输入，那么验证它是这个模块的一部分。。那么让我们看看configureTestingModule()中的模块定义。哎呀！它不导入 FontAwesomeModule。所以 fa-icon 是一个未知元素。所以你得到了那个错误。

【参考方案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 应用程序所做的一切，以便测试能够镜像前端渲染、路由、图标和管道。