Getting error while displaying a component in lazy loaded module in Angular

Question

I have created a component and its name is s-header. This component is registered in HomeModule because its a part of this module, but when i try to display this component in home.component.html it gives me this erorr.

If 's-header' is an Angular component, then verify that it is part of this module.

If 's-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

here is my code

import { HeaderComponent } from '../../general-components/header/header.component';

declarations: [
    HeaderComponent,
],

this is a header component

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

@Component({
    selector: 's-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }
}

this is how i am trying to display it

<s-header></s-header>

Answer 1

If this is a version of Angular without Ivy - you'll need to also add this component into the entry component array of the lazy loaded module. Its because the factory for this component doesn't exists (because its coming from a lazy loaded module)

Simply:

import { HeaderComponent } from '../../general-components/header/header.component';

declarations: [
    HeaderComponent,
...
],
entryComponents: [
    HeaderComponent
]