Error while building webcomponent in angular 11

Question

I am new in creating webcomponents and getting build errors after successfully compiling the application. The Angular bundles are getting generated but with error. Below is the scenario.

appmodule.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, Injector, DoBootstrap, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from 
'@angular/core';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms';

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

import { CustomLoginComponent } from './custom-login/custom-login.component';

@NgModule({

declarations: [
AppComponent,
HeaderComponent,
CustomLoginComponent
 ],

 entryComponents: [
 HeaderComponent,
 CustomLoginComponent,
 AppComponent
 ],

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
],

schemas: [
CUSTOM_ELEMENTS_SCHEMA
],

exports: [AppComponent],
providers: []
})

export class AppModule implements DoBootstrap {

constructor(private injector: Injector) {}

public ngDoBootstrap(): void{

let elemA = createCustomElement(AppComponent, {injector: this.injector});

customElements.define('my-app', elemA);
  
let elemB = createCustomElement(HeaderComponent, {injector: this.injector});
  
customElements.define('my-header', elemB);
}
}

HeaderComponent

import { Component } from '@angular/core';
import { CustomLoginComponent } from '../login/custom-login.component';

@Component({
selector: 'app-header',

template:`<custom-login> Text </custom-login>`,

styleUrls: ['./header.component.scss']
})

export class HeaderComponent {
 // Do something
}

CustomLoginComponent

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

@Component({
selector: 'custom-login',

template:`<p> Hi </p>`,

styleUrls: ['./custom-login.component.scss']
})

export class CustomLoginComponent {
 // Do something
}

After Compiling the application, i am getting below error.

√ Compiled successfully.

Error: src/app/header/header-component.component.html:1:1 - error NG8001: 'custom-login' is not a known element:
1. If 'custom-login' is an Angular component, then verify that it is part of this module.
2. If 'custom-login' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <custom-login></custom-login>
  ~~~~~~~~~~~~~~

  src/app/header/header-component.component.ts:15:15
    15  templateUrl: './header-component.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.

Can anyone let me know where am i going wrong ?