Açısal 2 Karma Testi 'bileşen-adı' bilinen bir öğe değil

AppComponent'te, HTML kodunda nav bileşenini kullanıyorum. UI iyi görünüyor. Ng servisi yaparken hata yok. ve uygulamaya baktığımda konsolda hata yok.

Ancak projem için Karma'yı çalıştırdığımda bir hata oluşuyor:

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.

Benim app.module.ts dosyamda :

var:

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

Ayrıca NgModule'ün bildirimler kısmında da yer almaktadır.

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

Ben kullanıyorum NavComponentiçinde benimAppComponent

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>

Benzer bir soru görmüştüm, ancak bu sorunun cevabı, NgModule'ü içinde bir dışa aktarım olan nav bileşenine eklememiz gerektiğini söylüyor, ancak bunu yaptığımda derleme hatası alıyorum.

Ayrıca: app.component.spec.ts

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

Birim testlerinde, çoğunlukla uygulamanızın diğer bölümlerinden izole edilmiş bileşeni test etmek istediğiniz için, Angular modülünüzün bileşenler, hizmetler vb. Gibi bağımlılıklarını varsayılan olarak eklemeyecektir. Yani bunu testlerinizde manuel olarak yapmanız gerekiyor. Temel olarak burada iki seçeneğiniz var:

A) Testte orijinal NavComponent'i beyan edin

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

B) NavComponent ile alay edin

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

// it(...) test cases 

});

@Component({
  selector: 'app-nav',
  template: ''
})
class MockNavComponent {
}

Resmi belgelerde daha fazla bilgi bulacaksınız .

Ayrıca kullanabilirsiniz NO_ERRORS_SCHEMA

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

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

Üst öğeye bileşeni içe aktarmak benim için sorunu çözdü.

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

Bunu, spec of the parentbu bileşenin kullanıldığı yere ekleyin .

Bir neden daha, birden fazla .compileComponents() içinbeforeEach() test durumda

örneğin

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

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

Adım 1: Spesifikasyon dosyasının başlangıcında taslaklar oluşturun.

@Component({selector: 'app-nav', template: ''})
class NavComponent{}

Adım 2: Bileşen bildirimlerine saplamalar ekleyin.

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
}).compileComponents();