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'
无法绑定到 '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();
});
;
})
运行ner 显示此错误:
失败:模板解析错误:
无法绑定到 'icon',因为它不是 'fa-icon' 的已知 属性。
- 如果 'fa-icon' 是一个 Angular 组件并且它有 'icon' 个输入,那么
确认它是该模块的一部分。
- 如果 'fa-icon' 是一个 Web 组件然后添加 'CUSTOM_ELEMENTS_SCHEMA' 到这个的 '@NgModule.schemas'
组件来抑制此消息。
- 要允许任何 属性 添加 'NO_ERRORS_SCHEMA' 到此组件的“@NgModule.schemas”。这是导致问题的 HTML。
我尝试在测试端导入 FontAwesomeModule 和 FaIcon 并添加到 TestBed 配置的导入语句。我试图确保组件端也有导入。似乎没有任何效果。
找到解决方案:在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 应用程序所做的一切,以便测试反映前端渲染、路由、图标和管道。
无法绑定到 '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();
});
;
})
运行ner 显示此错误:
失败:模板解析错误: 无法绑定到 'icon',因为它不是 'fa-icon' 的已知 属性。
- 如果 'fa-icon' 是一个 Angular 组件并且它有 'icon' 个输入,那么
确认它是该模块的一部分。 - 如果 'fa-icon' 是一个 Web 组件然后添加 'CUSTOM_ELEMENTS_SCHEMA' 到这个的 '@NgModule.schemas' 组件来抑制此消息。
- 要允许任何 属性 添加 'NO_ERRORS_SCHEMA' 到此组件的“@NgModule.schemas”。这是导致问题的 HTML。
我尝试在测试端导入 FontAwesomeModule 和 FaIcon 并添加到 TestBed 配置的导入语句。我试图确保组件端也有导入。似乎没有任何效果。
找到解决方案:在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 应用程序所做的一切,以便测试反映前端渲染、路由、图标和管道。