Angular実行テストエラー:'app-messages'is not a known element

Angular実行テストエラー:'app-messages'is not a known element

ネイティブ環境:

$ ng --version
Angular CLI: 7.1.1
Node: 10.11.0
OS: darwin x64
Angular: 7.1.1

エラーの詳細:

Chrome 72.0.3622 (Mac OS X 10.13.6) AppComponent should create the app FAILED
	'app-messages' is not a known element:
	1. If 'app-messages' is an Angular component, then verify that it is part of this module.
	2. If 'app-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
	<router-outlet></router-outlet>
	[ERROR ->]<app-messages></app-messages>"): ng:///DynamicTestModule/AppComponent.html@22:0

問題の分析:

ng serveを使用してアプリケーションを実行し、http://localhost:4200にアクセスすることで、正常に動作し、エラーは報告されませんでした.しかし、ng testを実行すると大きなプッシュエラーが表示されます.これはなぜですか.
ヒントこの「既知の要素ではない」は、一般的にコンポーネントを導入していないが、コードにはすでに導入されているのに、なぜこのようにエラーを報告するのだろうか.
最後に,アプリケーションコードに導入する必要があるほか,テストコード(*.spec.ts)にも対応するコンポーネントやモジュールを再導入する必要があることが分かった.
例えば、上記の例では、AppComponentコンポーネントではapp-messagesコンポーネントテンプレートが使用されているが、app−messagesコンポーネント(Messages Component)は導入されていない.

解決策：

対応するコンポーネントを導入します.XXX is not a known elementのようなエラーはまだ多く、対応するコンポーネントを導入すればよい.
たとえば、DashboardComponentコンポーネントでは、app-hero-searchコンポーネントテンプレートが使用されていますが、HeroSearchComponentコンポーネントは導入されていません.

Chrome 72.0.3622 (Mac OS X 10.13.6) DashboardComponent should create FAILED
	'app-hero-search' is not a known element:
	1. If 'app-hero-search' is an Angular component, then verify that it is part of this module.
	2. If 'app-hero-search' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
	</div>
	[ERROR ->]<app-hero-search></app-hero-search>
	"): ng:///DynamicTestModule/DashboardComponent.html@12:0

修正後のコード:

修正後のdashboard.component.spec.tsのbeforeEach部分コードは以下の通りである.

// dashboard.component.spec.ts 
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        DashboardComponent, 
        MessagesComponent, 
        HeroSearchComponent
      ],
      imports:[
        RouterTestingModule,
        HttpClientTestingModule
      ]
    })
    .compileComponents();
  }));

詳細については、プロジェクトコードを参照してください.
https://github.com/cnwyt/angular-tour-of-heroes
[END]