如何在进行模态对话框的延迟加载时解决EntryComponent问题

Question

我正在使用Angular 8，我想在我的项目中延迟加载对话框。在做这件事的时候，我得到了以下错误：-

未找到EditProfileComponent的组件工厂。你把它添加到了吗@NgModule.entry组件？

因为这是组件的懒惰加载，所以我不想在app.module.ts中声明EditProfileComponent。

详细代码如下：-

应用程序路由模块.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(编辑配置文件页面从此处正确打开(

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
});    
}

编辑配置文件路由模块.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 { }

如何解决问题？

Answer 1

如Fateh Mohamed所述：

。。。如果ConfirmComponent在另一个模块中，您需要将其导出到那里，这样您就可以在外部使用它，添加：

exports: [ ConfirmComponent ]

因此，只需将EditProfileComponent添加到editprofile.module.ts的exports数组中，就可以开始了！

快乐编码：(