Дочерний компонент HTML не рендерится, пока находится в DOM

Question

Я создал компонент общего поиска, объявил в CoreModule и импортировал модуль в CoreModule.

Теперь, когда я использую компонент общего поиска, его HTML-код отображается не в DOM, а при проверкеэлемент в браузере, селектор компонента находится в том же месте, но не имеет его внутреннего HTML.

Поиск компонента HTML:

<div>
<a class="header-link search-link">
    <i class="fa fa-search icon text-white" aria-hidden="true"></i>
    <p class="site-header-text text-white">Search</p>
</a>
<div class="onclick-search-div mb-3 position-relative" style="display:none;">
    <input type="text" class="referling-search" placeholder="ClassPass .etc" aria-describedby="basic-addon2">
    <i class="fa fa-search search-icon position-absolute" aria-hidden="true"></i>
    <div class="searched-items">
        <ul class="bgWhite">
            <li></li>
        </ul>
    </div>
</div>

Поиск компонента TS:

import { Component } from "@angular/core";
@Component({
  selector: 'app-header-search-bar',
  templateUrl: './header-search-bar.html',
  styleUrls:['./header-search-bar.css']
})
export class HeaderSearchBarComponent {
   constructor() {}
}

CoreModule:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}

AppModule:

import { NgModule } from "@angular/core";
import { CommonModule } from"@angular/common";
import { HomeComponent } from "./components/home/home.component";
import { CoreModule } from './core/core.module';

@NgModule({
    imports: [
        CommonModule,
        CoreModule 
    ],
    declarations: [
        HomeComponent
    ]
})
export class CoreModule {}

HomeComponent.html:

<app-header-search-bar></app-header-search-bar>

Answer 1

Вам необходимо экспортировать HomeHeaderComponent, чтобы использовать его в AppModule,

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
    exports : [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}