Test de karma d'Angular 2 "component-name" n'est pas un élément connu

Question

Dans l'AppComponent, j'utilise le composant nav dans le code HTML. L'interface utilisateur semble bien fonctionner. Aucune erreur lors de l'exécution de ng serve. et aucune erreur dans la console lorsque je regarde l'application.

Mais quand j'ai lancé Karma pour mon projet, il y a une erreur :

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.

Dans mon app.module.ts :

il y a :

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

Il est également dans la partie déclarations de NgModule

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

J'utilise le NavComponent dans mon 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

<app-nav></app-nav>
<div class="container-fluid">
</div>

J'ai vu une question similaire, mais la réponse à cette question dit que nous devrions ajouter NgModule dans le composant nav qui a une exportation en elle, mais je reçois une erreur de compilation quand je fais cela.

Il y a aussi : app.component.spec.ts

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

Answer 1

Si vous créez un stub et obtenez toujours la même erreur, cela peut être dû au mode --watch activé. Essayez de l'arrêter et de l'exécuter à nouveau.

Answer 2

Une raison supplémentaire est qu'il peut y avoir plusieurs .compileComponents() para beforeEach() dans votre scénario de test

par exemple

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestComponent]
  }).compileComponents();
}));

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientModule],
    declarations: [Test1Component],
    providers: [HttpErrorHandlerService]
  }).compileComponents();
});