В AppComponent я использую компонент nav в HTML-коде. Пользовательский интерфейс выглядит нормально. Нет ошибок при выполнении ng serve. и никаких ошибок в консоли, когда я смотрю на приложение.
Но когда я запустил Karma для своего проекта, возникла ошибка:
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.
В моем app.module.ts :
Там есть:
import { NavComponent } from './nav/nav.component';
Это также есть в части объявлений NgModule
@NgModule({
declarations: [
AppComponent,
CafeComponent,
ModalComponent,
NavComponent,
NewsFeedComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
ModalModule,
NgbModule.forRoot(),
BootstrapModalModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
Я использую NavComponent
в своем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>
Я видел аналогичный вопрос, но в ответе на этот вопрос говорится, что мы должны добавить NgModule в компонент навигации, в котором есть экспорт, но при этом я получаю ошибку компиляции.
Также есть: 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
Анджела П
источник
источник
import { NavComponent }
включить его в свои spec.tsОтветы:
Поскольку в модульных тестах вы хотите протестировать компонент, в основном изолированный от других частей вашего приложения, Angular не будет добавлять зависимости вашего модуля, такие как компоненты, службы и т. Д. По умолчанию. Так что вам нужно сделать это вручную в ваших тестах. По сути, у вас есть два варианта:
A) Объявите исходный компонент NavComponent в тесте
Б) Насмешка над NavComponent
Дополнительную информацию вы найдете в официальной документации .
источник
AppModule
в конфигурацию TestBed. Вы бы посоветовали этого не делать?Вы также можете использовать
NO_ERRORS_SCHEMA
https://2018.ng-conf.org/mocking-dependencies-angular/
источник
Для меня импорт компонента в родительский элемент решил проблему.
Добавьте это
spec of the parent
туда, где этот компонент используется.источник
Еще одна причина заключается в том , что там может быть несколько
.compileComponents()
дляbeforeEach()
вашей тестанапример, для
источник
Шаг 1: Создайте заглушки в начале файла спецификации.
Шаг 2: Добавьте заглушки в объявления компонентов.
источник