typescript 测试 Angular 2 应用程序中的“CUSTOM_ELEMENTS_SCHEMA”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42215500/
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
"CUSTOM_ELEMENTS_SCHEMA" Errors in Testing Angular 2 App
提问by Muirik
In writing tests for my Angular 2 app, I am running into these errors: the selectors we're using:
在为我的 Angular 2 应用程序编写测试时，我遇到了这些错误：我们使用的选择器：
"): AppComponent@12:35 'tab-view' is not a known element:
1. If 'my-tab' is an Angular component, then verify that it is part of this module.
2. If 'my-tab' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</div>
<div class="app-body">
[ERROR ->]<tab-view class="my-tab" [options]="tabOptions"></tab-view>
</div> </div>
I have added CUSTOM_ELEMENTS_SCHEMAto my root module, as well as all other modules, but I am still getting the errors.
我已经添加CUSTOM_ELEMENTS_SCHEMA到我的根模块以及所有其他模块中，但我仍然收到错误消息。
- What else do I need to do?
- Does this need to be in all modules, or just the root?
- Is there anything else I need to add?
- 我还需要做什么？
- 这需要在所有模块中，还是只需要在根中？
- 还有什么我需要补充的吗？
回答by Muirik
So what I had to do to get this working was also set the schemas in the TestBed.configureTestingModule - which is not a separate module file, but a part of the app.component.spec.ts file. Thanks to @camaronfor the tip. I do think the docs could be a clearer on this point.
所以我必须做的就是在 TestBed.configureTestingModule 中设置模式 - 这不是一个单独的模块文件，而是 app.component.spec.ts 文件的一部分。感谢@camaron的提示。我确实认为文档在这一点上可能更清楚。
Anyway, this is what I added to get it to work. Here are the opening contents of my app.component.spec.ts file.
无论如何，这是我添加的内容以使其正常工作。这是我的 app.component.spec.ts 文件的打开内容。
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './../app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
declarations: [AppComponent],
imports: [RouterTestingModule]
});
TestBed.compileComponents();
});
回答by Aryashree Pritikrishna
It works for me this way, in your spec.ts file you have to importyour components and needs to add it to declarations. In my case its in about.component.spec.ts
它以这种方式对我有用，在您的 spec.ts 文件中，您必须import将其添加到组件中，并且需要将其添加到declarations. 在我的情况下它在 about.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { SidebarComponent } from './../sidebar/sidebar.component';
import { FooterComponent } from './../footer/footer.component';
describe('AboutComponent', () => {
let component: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AboutComponent, SidebarComponent, FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AboutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
