Angular 2 Karma Test ‘Komponentenname’ ist kein bekanntes Element

In der AppComponent verwende ich die Nav-Komponente im HTML-Code. Die Benutzeroberfläche sieht gut aus. Keine Fehler beim Ausführen von ng. und keine Fehler in der Konsole, wenn ich mir die App anschaue.

Aber als ich Karma für mein Projekt ausgeführt habe, ist ein Fehler aufgetreten:

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 meiner app.module.ts :

es gibt:

 import { NavComponent } from './nav/nav.component'; 

Es ist auch im Deklarationsteil von NgModule

 @NgModule({ declarations: [ AppComponent, CafeComponent, ModalComponent, NavComponent, NewsFeedComponent ], imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, ModalModule.forRoot(), ModalModule, NgbModule.forRoot(), BootstrapModalModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) 

Ich verwende die NavComponent in meiner AppComponent

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

  

Ich habe eine ähnliche Frage gesehen, aber die Antwort in dieser Frage besagt, dass wir NgModule in der Nav-Komponente hinzufügen sollten, die einen Export enthält, aber ich bekomme einen Kompiliererrors, wenn ich das tue.

Es gibt auch: app.component.spec.ts

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

   

Da Sie in Komponententests die Komponente meist isoliert von anderen Teilen Ihrer Anwendung testen möchten, fügt Angular die Abhängigkeiten Ihres Moduls wie Komponenten, Dienste usw. nicht standardmäßig hinzu. Sie müssen das also manuell in Ihren Tests tun. Grundsätzlich haben Sie hier zwei Möglichkeiten:

A) Deklarieren Sie die ursprüngliche NavComponent im Test

 describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, NavComponent ] }).compileComponents(); })); 

B) Mock die NavComponent

 describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, MockNavComponent ] }).compileComponents(); })); // it(...) test cases }); @Component({ selector: 'app-nav', template: '' }) class MockNavComponent { } 

Weitere Informationen finden Sie in der offiziellen Dokumentation .

Sie können auch NO_ERRORS_SCHEMA

 describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); })); 

https://www.ng-conf.org/mocking-dependencies-angular/