Angular2 Cli Test (Webpack) Erros: "Fehler: Template Parse-Fehler"

Question

Das ist mein AppModule:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { CitiesComponent } from './cities/cities.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    CitiesComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 
export class AppModule { } 

CitiesComponent ist ein sehr einfaches Modul. Und ich benutze die Komponente innerhalb AppComponent.

Anwendung erstellt und funktioniert ohne Fehler; Aber wenn ich ng test Execute schlägt es mit Fehlern:

Error: Template parse errors: 
'app-cities' is not a known element: 
1. If 'app-cities' is an Angular component, then verify that it is part of this module. 
2. If 'app-cities' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main> <h1>Hello from Angular 2 App with Webpack</h1> <div class="ui segment raised"> Hello </div> [ERROR ->]<app-cities></app-cities> </main> "): AppComponent@0:99 in config/karma-test-shim.js (line 181) 
parse@webpack:///~/@angular/compiler/bundles/compiler.umd.js:8813:0 <- config/karma-test-shim.js:181:50110 
_compileTemplate@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16978:0 <- config/karma-test-shim.js:186:8984 
webpack:///~/@angular/compiler/bundles/compiler.umd.js:17065:0 <- config/karma-test-shim.js:186:10862 
forEach@webpack:///~/core-js/modules/_typed-array.js:467:0 <- config/karma-test-shim.js:2:50965 
s@webpack:///~/@angular/compiler/bundles/compiler.umd.js:17061:62 <- config/karma-test-shim.js:186:10831 
_compileComponents@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16887:0 <- config/karma-test-shim.js:186:6610 
_compileModuleAndAllComponents@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16828:37 <- config/karma-test-shim.js:186:4786 
compileModuleAndAllComponentsSync@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16804:0 <- config/karma-test-shim.js:186:4350 
compileModuleAndAllComponentsSync@webpack:///~/@angular/compiler/bundles/compiler.umd.js:1:0 <- config/karma-test-shim.js:150:24366 
_initIfNeeded@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:22512 
createComponent@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:25044 
createComponent@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:20648 
webpack:///~/@angular/core/bundles/core-testing.umd.js:1:0 <- config/karma-test-shim.js:66:10991 
invoke@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40262 
onInvoke@webpack:///~/zone.js/dist/proxy.js:75:0 <- config/karma-test-shim.js:38:1630 
invoke@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40216 
run@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:34612 
webpack:///~/zone.js/dist/jasmine-patch.js:28:0 <- config/karma-test-shim.js:52:655 
execute@webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3370 
execute@webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3370 
webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3480 
invokeTask@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40940 
runTask@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:35224 
drainMicroTaskQueue@webpack:///~/zone.js/dist/zone.js:584:0 <- config/karma-test-shim.js:24:19813 
s@webpack:///~/core-js/modules/_typed.js:25:0 <- config/karma-test-shim.js:2:22237 
webpack:///~/core-js/modules/_typed-buffer.js:12:0 <- config/karma-test-shim.js:2:22359 
u@webpack:///~/core-js/modules/_microtask.js:18:0 <- config/karma-test-shim.js:2:15867 

Jede Idee? Mit Angular2-2.0 und "Winkel-cli": "1.0.0-beta.15"

Answer 1

Sie vergessen haben CitiesComponent zum Testmodule hinzuzufügen, hier ist ein Beispiel Test von mir

import { 
    ComponentFixture, TestBed, inject, async 
} from '@angular/core/testing'; 
import { DebugElement } from '@angular/core'; 
import { By } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { RouterModule, RouterOutletMap } from '@angular/router'; 

let comp: AppComponent; 
let fixture: ComponentFixture<AppComponent>; 
let el: DebugElement; 

describe('AppComponent',() => { 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [AppComponent], // declare the test component 
     }); 

     fixture = TestBed.createComponent(AppComponent); 

     comp = fixture.componentInstance; // AppComponent test instance 

     it('should instantiate the component',() => { 
      expect(fixture.debugElement).toBeDefined(); 
     }); 
    }); 

}); 

In die Zeile TestBed.configureTestingModule möchten Sie die CitiesComponent erneut deklarieren, da das Modul, das Sie testen, anders ist als das tatsächliche.

Answer 2

In Ihrem app.component.spec.ts, sollten Sie für die CitiesComponent erklären:

import { TestBed, async } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 
import { CitiesComponent } from './cities/cities.component'; 

describe('AppComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent, 
     CitiesComponent // => add to here 
     ], 
    }); 
    TestBed.compileComponents(); 
    }); 

    // 
});