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

【问题标题】：How to solve the EntryComponent issue while doing lazy loading of modal dialog?如何在延迟加载模态对话框时解决 EntryComponent 问题？
【发布时间】：2020-12-02 14:29:51
【问题描述】：

我正在使用 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 { }

如何解决这个问题？

【问题讨论】：

请注意，您不需要将对话框组件包含在 Ivy 模块的 entryComponents 部分中（从 Angular 9 开始）

标签： angular routes dialog lazy-loading angular8

【解决方案1】：

正如here 所描述的Fateh Mohamed：

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

exports: [ ConfirmComponent ]

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

编码愉快:)

【讨论】：