延迟加载模态对话框时如何解决EntryComponent问题？

问题描述

我正在使用Angular 8，并且想在项目中延迟加载对话框。这样做时，我得到以下错误：-

未找到EditProfileComponent的组件工厂。您是否将其添加到 @ NgModule.entryComponents？

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

详细代码如下：-

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 （“编辑个人资料”页面已从此处正确打开）

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 { }

如何解决该问题？

解决方法

如here对Fateh Mohamed所述：

...如果ConfirmComponent在另一个模块中，则需要将其导出，以便可以在外部使用，请添加：

exports: [ ConfirmComponent ]

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

快乐编码：）