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:

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'; 

    Poiché nei test unitari si desidera testare il componente per lo più isolato da altre parti della propria applicazione, Angular non aggiungerà le dipendenze del modulo come componenti, servizi, ecc. Per impostazione predefinita. Quindi devi farlo manualmente nei tuoi test. Fondamentalmente, hai due opzioni qui:

    A) Dichiarare il NavComponent originale nel test

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

    B) Deridere il NavComponent

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

    Troverai maggiori informazioni nella documentazione ufficiale .

    Puoi anche utilizzare NO_ERRORS_SCHEMA

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

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