How to solve the EntryComponent issue while doing lazy loading of modal dialog?

Question

I am using Angular 8 and I want to lazy load dialog in my project. While doing this I am getting below error:-

No component factory found for EditProfileComponent. Did you add it to @NgModule.entryComponents?

As this is Lazy loading of components so I dont want to declare EditProfileComponent in app.module.ts.

Detailed code is as below:-

app-routing.module.ts

import { HomeComponent } from './Pages/HomePages/Home/home.component';
const routes: Routes = [
    { path: 'home',  component: HomeComponent
    children: [              
        { path: 'editprofile',loadChildren: () => import('./Pages/ProfilePages/EditProfile/editprofile.module').then(m => m.EditProfileModule)},                                      
    ]},  
  { path: '**', redirectTo: '/login' },
];

home.component.html

<mat-menu #welcome="matMenu">
     <button class="button-menu" mat-menu-item [routerLink]="editprofile" [queryParams]="{dialog: 
     true}">Edit Profile</button>
</mat-menu>

home.component.ts (Edit Profile page is opening properly from here)

import { EditProfileComponent } from '../../ProfilePages/EditProfile/editprofile.component'

constructor(private route: ActivatedRoute, private router: Router, private dialog: MatDialog) {        
    route.queryParams.subscribe(params => {
        if (params['dialog']) {
          this.openEditProfile();
        }
    });
}

public openEditProfile() {
    const editProfDialogRef = this.dialog.open(EditProfileComponent, {
        width: '50%',
        disableClose: true
    });    
}

editprofile-routing.module.ts

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

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

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

editprofile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditProfileRoutingModule } from './editprofile-routing.module';
import { EditProfileComponent } from './editprofile.component';

@NgModule({
  imports: [
    CommonModule,      
    EditProfileRoutingModule,    
  ],
  declarations: [
    EditProfileComponent,          
  ],
  entryComponents: [    
    EditProfileComponent,      
  ],
})
export class EditProfileModule { }

How to solve the issue?

Answer 1

As described here by Fateh Mohamed:

...if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add:

exports: [ ConfirmComponent ]

So simply add the EditProfileComponent to the exports array of your editprofile.module.ts and you should be good to go!

Happy coding :)