Как совместно использовать компоненты в angular компонентах, которые были загружены динамически

Question

Я создаю веб-приложение, используя angular 8, я попытался динамически загрузить все мои компоненты в маршруте, он работал нормально, но когда я добавил свой общий компонент, я получил эту ошибку в консоли

Error: Template parse errors:
'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="layout-7">  
    [ERROR ->]<app-header></app-header>
    <div id="content" class="content"> 
        <section class="padding-b"): ng:///Test1ComponentModule

вот код test1.component.ts

<div class="layout-7">  
    <app-header></app-header>
    <div id="content" class="content"> 
        <section class="padding-bottom-60">

        </section>
        <app-newsletter></app-newsletter>
    </div>
    <app-footer></app-footer>
</div>

вот мой код для app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ { 
        path: 'test', 
        loadChildren : () => import('./test1/test1.module').then(m => m.Test1ComponentModule), data: { animation: 'heroes' } 
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'top'})], exports: [RouterModule]
})
export class AppRoutingModule { } 

Вот мой код для app. module.ts

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
import { AppComponent } from './app.component';
import { FooterComponent } from './include/footer/footer.component';
import { HeaderComponent } from './include/header/header.component';
@NgModule({
    declarations: [ AppComponent, FooterComponent, HeaderComponent, ],
    imports: [ BrowserModule, FormsModule, ReactiveFormsModule, ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

вот код для test1.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-test1',
    templateUrl: './test1.component.html',
    styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
    constructor() {}    

    ngOnInit() { }
}

вот код для test1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Test1ComponentRoutingModule } from './test1-routing.module';
import { Test1Component } from './test1.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    Test1ComponentRoutingModule
  ],
  declarations: [Test1Component]
})
export class Test1ComponentModule {}

здесь это код для test1-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Test1Component } from './test1.component';

const routes: Routes = [{ path: '', component: Test1Component }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Test1ComponentRoutingModule {}

Как я могу решить эту проблему