En AppComponent, estoy usando el componente de navegación en el código HTML. La interfaz de usuario se ve bien. No hay errores al hacer ng serve. y no hay errores en la consola cuando miro la aplicación.
Pero cuando ejecuté Karma para mi proyecto, hay un error:
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.En mi app.module.ts :
hay:
import { NavComponent } from './nav/nav.component';También está en la parte de declaraciones de NgModule.
@NgModule({ declarations: [ AppComponent, CafeComponent, ModalComponent, NavComponent, NewsFeedComponent ], imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, ModalModule.forRoot(), ModalModule, NgbModule.forRoot(), BootstrapModalModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) Estoy usando NavComponent en mi AppComponent
aplicación.componente.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'; }aplicación.componente.html
<app-nav></app-nav> <div class="container-fluid"> </div>He visto una pregunta similar, pero la respuesta en esa pregunta dice que debemos agregar NgModule en el componente de navegación que tiene una exportación en eso, pero recibo un error de compilación cuando hago eso.
También hay: app.component.spec.ts
import {NavComponent} from './nav/nav.component'; import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component';Debido a que en las pruebas unitarias desea probar el componente mayormente aislado de otras partes de su aplicación, Angular no agregará las dependencias de su módulo como componentes, servicios, etc. de forma predeterminada. Por lo tanto, debe hacerlo manualmente en sus pruebas. Básicamente, tienes dos opciones aquí:
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 { }Encontrarás más información en la documentación oficial .
También puede usar NO_ERRORS_SCHEMA
describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); }));Paso 1: Cree stubs al principio del archivo de especificaciones.
@Component({selector: 'app-nav', template: ''}) class NavComponent{}Paso 2: Agregue stubs en las declaraciones de los componentes.
TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent, NavComponent ], }).compileComponents();