In der AppComponent verwende ich die nav-Komponente im HTML-Code. Die Benutzeroberfläche sieht gut aus. Keine Fehler beim Aufschlag. und keine Fehler in der Konsole, wenn ich mir die App ansehe.
Aber als ich Karma für mein Projekt ausgeführt habe, ist ein Fehler aufgetreten:
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.
In meiner app.module.ts :
es gibt:
import { NavComponent } from './nav/nav.component';
Es ist auch in den Deklarationen Teil von NgModule
@NgModule({
declarations: [
AppComponent,
CafeComponent,
ModalComponent,
NavComponent,
NewsFeedComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
ModalModule,
NgbModule.forRoot(),
BootstrapModalModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
Ich benutze das NavComponent
in meinemAppComponent
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>
Ich habe eine ähnliche Frage gesehen, aber die Antwort in dieser Frage besagt, dass wir NgModule in die Navigationskomponente einfügen sollten, die einen Export enthält, aber ich erhalte dabei einen Kompilierungsfehler.
Es gibt auch: app.component.spec.ts
import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
javascript
node.js
angular
typescript
karma-jasmine
Angela P.
quelle
quelle
import { NavComponent }
in Ihren spec.tsAntworten:
Da Sie in Komponententests die Komponente testen möchten, die größtenteils von anderen Teilen Ihrer Anwendung isoliert ist, fügt Angular die Abhängigkeiten Ihres Moduls wie Komponenten, Dienste usw. standardmäßig nicht hinzu. Sie müssen dies also manuell in Ihren Tests tun. Grundsätzlich haben Sie hier zwei Möglichkeiten:
A) Deklarieren Sie die ursprüngliche NavComponent im Test
B) Verspotten Sie die NavComponent
Weitere Informationen finden Sie in der offiziellen Dokumentation .
quelle
AppModule
in der TestBed-Konfiguration zu importieren . Würden Sie dagegen empfehlen?Sie können auch verwenden
NO_ERRORS_SCHEMA
https://2018.ng-conf.org/mocking-dependencies-angular/
quelle
Für mich hat das Importieren der Komponente in das übergeordnete Element das Problem behoben.
Fügen Sie dies dort hinzu,
spec of the parent
wo diese Komponente verwendet wird.quelle
Ein weiterer Grund ist , dass es können mehrere sein
.compileComponents()
fürbeforeEach()
in Ihrem Testfallfür zB
quelle
Schritt 1: Erstellen Sie Stubs am Anfang der Spezifikationsdatei.
Schritt 2: Fügen Sie Stubs in die Deklarationen der Komponente ein.
quelle