Javascript Angular 2 Karma Test 'component-name' 不是已知元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44504468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Karma Test 'component-name' is not a known element
提问by Angela Pan
In the AppComponent, I'm using the nav component in the HTML code. The UI looks fine. No errors when doing ng serve. and no errors in console when I look at the app.
在 AppComponent 中，我在 HTML 代码中使用了导航组件。用户界面看起来不错。执行 ng serve 时没有错误。当我查看应用程序时，控制台中没有错误。
But when I ran Karma for my project, there is an error:
但是当我为我的项目运行 Karma 时，出现错误：
Failed: Template parse errors:
'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
In my app.module.ts:
在我的app.module.ts 中：
there is:
有：
import { NavComponent } from './nav/nav.component';
It is also in the declarations part of NgModule
它也在 NgModule 的声明部分
@NgModule({
declarations: [
AppComponent,
CafeComponent,
ModalComponent,
NavComponent,
NewsFeedComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
ModalModule,
NgbModule.forRoot(),
BootstrapModalModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
I'm using the NavComponentin my AppComponent
我NavComponent在我的AppComponent
app.component.ts
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { NavComponent } from './nav/nav.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angela';
}
app.component.html
应用程序组件.html
<app-nav></app-nav>
<div class="container-fluid">
</div>
I have seen a similar question, but the answer in that question says we should add NgModule in the nav component that has a export in that, but I'm getting compile error when I do that.
我见过一个类似的问题，但该问题的答案说我们应该在导航组件中添加 NgModule，该组件具有导出功能，但是当我这样做时出现编译错误。
There is also: app.component.spec.ts
还有：app.component.spec.ts
import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
回答by Kim Kern
Because in unit tests you want to test the component mostly isolated from other parts of your application, Angular won't add your module's dependencies like components, services, etc. by default. So you need to do that manually in your tests. Basically, you have two options here:
因为在单元测试中，您希望测试的组件大部分与应用程序的其他部分隔离，所以 Angular 默认不会添加模块的依赖项，如组件、服务等。因此，您需要在测试中手动执行此操作。基本上，您在这里有两个选择：
A) Declare the original NavComponent in the test
A) 在测试中声明原始的 NavComponent
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));
B) Mock the NavComponent
B) 模拟 NavComponent
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
MockNavComponent
]
}).compileComponents();
}));
// it(...) test cases
});
@Component({
selector: 'app-nav',
template: ''
})
class MockNavComponent {
}
You'll find more information in the official documentation.
您可以在官方文档中找到更多信息。
回答by Adrian
You can also use NO_ERRORS_SCHEMA
你也可以使用 NO_ERRORS_SCHEMA
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
回答by Devaarth
One more reason is that there can be multiple .compileComponents()for beforeEach()in your test case
还有一个原因是，可以有多个.compileComponents()用于beforeEach()在你的测试用例
for e.g.
例如
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent]
}).compileComponents();
}));
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
declarations: [Test1Component],
providers: [HttpErrorHandlerService]
}).compileComponents();
});
回答by Kailas
For me importing the component in the parent resolved the issue.
对我来说，在父级中导入组件解决了这个问题。
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));
Add this in spec of the parentwhere this component is used.
在spec of the parent使用此组件的地方添加它。
回答by Yuvraj Patil
Step 1:Create stubs at beginning of spec file.
步骤 1：在规范文件的开头创建存根。
@Component({selector: 'app-nav', template: ''})
class NavComponent{}
Step 2:Add stubs in component's declarations.
第 2 步：在组件的声明中添加存根。
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent,
NavComponent
],
}).compileComponents();
