ContactListComponent.html:1 ERROR Error: No component factory found for ContactComponent. Did you add it to @NgModule.entryComponents?

Question

I' m using try for make a Dialog in angular. by using nebular. I want to open contact component when click the button where is contact-list component. But there is a this fort of error.

ContactListComponent.html:1 ERROR Error: No component factory found for ContactComponent. Did you add it to @NgModule.entryComponents?

What should I have to do for this .

contact-list.component.html

<nb-card>
    <nb-card-header>
        THE HEADER
    </nb-card-header>

    <nb-card-body>
        <button nbButton (click)="addContact()">Add</button>
    </nb-card-body>
</nb-card>

contact-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { ContactService } from '../contact/contact.service';
import { ContactComponent } from '../contact/contact.component';
import { NbDialogService } from '@nebular/theme';

@Component({
selector: 'ngx-contact-list',
template: '<button nbButton (click)="open()">Open Dialog</button>',
styles: [
    `
    /deep/ nb-layout-column {
        height: 80vw;
    }
    `
]
})
export class ContactListComponent implements OnInit {
    isPopupOpened = true;

    constructor(private dialogService: NbDialogService) {}

    ngOnInit() {}

    open() {
        this.dialogService.open(ContactComponent, {});
    }
}

contact-list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactListComponent } from './contact-list.component';

import { NbCardModule } from '@nebular/theme';
import { ContactModule } from '../contact/contact.module';

@NgModule({
declarations: [ContactListComponent],
imports: [
    ContactModule,
    NbCardModule,
    CommonModule,

]
})
export class ContactListModule {}

contact.component.html

Hello! this is the contact dialog

contact.component.ts

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

@Component({
selector: 'ngx-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

}

contact.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactComponent } from './contact.component';

@NgModule({
declarations: [ContactComponent],
imports: [CommonModule],
exports: [ContactComponent]
})
export class ContactModule {}

Answer 1

just as the error says, add it to your entryComponents :

// contact.module.ts
entryComponents: [
        ContactComponent,
]

Answer 2

Add ContactComponent to entryComponents:

contact.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactComponent } from './contact.component';

@NgModule({
declarations: [ContactComponent],
imports: [CommonModule],
exports: [ContactComponent],
entryComponents: [ContactComponent]
})
export class ContactModule {}