只是运行应用程序我没有错误,它工作正常,但当我运行我的测试时,我收到以下错误:
'pattern-list' is not a known element: 1. If 'pattern-list' is an Angular component,then verify that it is part of this module. 2. If 'pattern-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" [ERROR ->]<pattern-list></pattern-list>
当我刚用“npm-start”运行应用程序时,我首先遇到了这个问题,我解决了在声明部分向app.module添加所需组件的问题.但现在,因为我想测试我得到相同的错误,我不知道为什么.
这是我的代码:
app.module.ts
@NgModule({ imports: [ BrowserModule,FormsModule,HttpModule,ReactiveFormsModule ],declarations: [ AppComponent,PatternListComponent,PatternDetailComponent,WidgetListComponent,FormComponent,DefaultWidget,LabelComponent,CheckBoxWidget ],bootstrap: [ AppComponent ],providers: [ WidgetService ] }) export class AppModule { }
app.component.ts
@Component({ selector: 'my-app',template: ` <pattern-list></pattern-list> ` }) export class AppComponent { }
pattern.list.component:
@Component({ selector: 'pattern-list',template: ` <div class="patterns"> <pattern-detail *ngFor="let p of patternDetails" [Metadata]="p" (selectPattern)="selectPattern(p)"></pattern-detail> </div> <div *ngIf="selectedPattern" class="widget-list"> <widget-list [pattern]="selectedPattern"> </widget-list> </div> `,styleUrls: ['/css/styles.css'] }) export class PatternListComponent implements OnInit{ selectedPattern: PatternDetails; constructor(private http: Http) { } patternDetails: PatternDetails[]; ngOnInit() { this.getPatterns(); } getPatterns() { this.http.get('/app/assets/patternDetails.json') .map((res:Response) => res.json() ) .subscribe( data => { this.patternDetails = data.patternList; },err => console.error('The problem is: ' + err),() => console.log('done') ); console.log(this.patternDetails); } selectPattern(pattern: PatternDetails) { this.selectedPattern = pattern; this.setSelectedProperty(pattern); } setSelectedProperty(selectedPattern: PatternDetails) { for (var p in this.patternDetails) { if (this.patternDetails[p] == selectedPattern) { this.patternDetails[p].selected = true; } else { this.patternDetails[p].selected = false; } } } }
我的测试文件:app.component.spec.ts
describe('AppComponent with TCB',function () { beforeEach(() => { TestBed.configureTestingModule({declarations: [AppComponent]}); }); describe('asdfasdf',function () { beforeEach(async(() => { TestBed.compileComponents(); })); it('should instantiate component',() => { let fixture = TestBed.createComponent(AppComponent); expect(fixture.componentInstance instanceof AppComponent).toBe(true,'should create AppComponent'); }); }); });
我正在使用webpack,我不确定这是否重要.
我想你需要
TestBed.configureTestingModule({imports: [AppModule]});