Угловой 2 «Компонент-имя» кармы не является известным элементом

В AppComponent я использую компонент nav в HTML-коде. Пользовательский интерфейс выглядит отлично. Нет ошибок при выполнении ng-сервиса. и никаких ошибок в консоли, когда я смотрю на приложение.

Но когда я запустил 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. 

В моем приложении.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

  

Я видел подобный вопрос, но ответ в этом вопросе говорит, что мы должны добавить NgModule в компонент nav, который имеет экспорт в этом, но я получаю ошибку компиляции, когда я это делаю.

Существует также: app.component.spec.ts

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

Поскольку в модульных тестах вы хотите протестировать компонент, который в основном изолирован от других частей вашего приложения, Angular не будет добавлять зависимости ваших модhive, такие как компоненты, службы … по умолчанию. Поэтому вам нужно сделать это вручную в своих тестах. У вас в основном есть два варианта:

Объявите оригинальный тест NavComponent в тесте

app.component.spec

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

Макет NavComponent

app.component.spec

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

Более подробную информацию вы найдете в официальной документации: https://angular.io/guide/testing

Вы также можете использовать NO_ERRORS_SCHEMA

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

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

  • Угловая форма 2 для проверки пароля повторения
  • Обработка 401s по всему миру с помощью углового
  • Угловое изменение на каждом нажатии клавиши
  • CORS и API API Google Maps
  • Доступ к нескольким просмотрщикам с помощью @viewchild
  • Angularjs2 - предварительная конфигурация сервера перед запуском приложения
  • Предупреждать пользователя о несохраненных изменениях перед выходом на страницу
  • Угловой провайдер для NameService
  • Использование труб в ngModel для элементов INPUT в угловом
  • множественная компоновка для разных страниц в угловом 2
  • Изменение заголовка страницы с помощью нового маршрутизатора «Угловой 2»
  • Давайте будем гением компьютера.