AppComponent では、HTML コードで nav コンポーネントを使用しています。UI は正常に見えます。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.
私のアプリモジュール:
がある:
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
アプリコンポーネント
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-nav></app-nav>
<div class="container-fluid">
</div>
同様の質問を見たことがありますが、その質問の回答では、エクスポートを含む nav コンポーネントに NgModule を追加する必要があると書かれていますが、実際に追加するとコンパイル エラーが発生します。
もあります:アプリコンポーネント仕様
import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
ベストアンサー1
ユニット テストでは、アプリケーションの他の部分からほとんど分離されたコンポーネントをテストする必要があるため、Angular は、コンポーネント、サービスなどのモジュールの依存関係をデフォルトでは追加しません。そのため、テストで手動で追加する必要があります。基本的に、ここでは 2 つのオプションがあります。
A) テストで元の NavComponent を宣言する
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));
B) NavComponentをモックする
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
MockNavComponent
]
}).compileComponents();
}));
// it(...) test cases
});
@Component({
selector: 'app-nav',
template: ''
})
class MockNavComponent {
}
詳細は公式文書。