L’Angular 2 Karma Test ‘component-name’ non è un elemento conosciuto

In AppComponent, sto usando il componente nav nel codice HTML. L’interfaccia utente sembra a posto. Nessun errore durante l’esecuzione di ng. e nessun errore in console quando guardo l’app.

Ma quando ho eseguito Karma per il mio progetto, c’è un errore:

• Test - Imansible risolvere tutti i parametri per (ClassName)

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. 

Nel mio app.module.ts :

c’è:

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

È anche nella parte delle dichiarazioni di NgModule

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

Sto utilizzando NavComponent nel mio 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

Ho visto una domanda simile, ma la risposta in questa domanda dice che dovremmo aggiungere NgModule nel componente nav che ha un’esportazione, ma sto ricevendo errore di compilazione quando lo faccio.

C’è anche: app.component.spec.ts

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

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

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

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