如何解决模态对话框延迟加载时的 EntryComponent 问题?
How to solve the EntryComponent issue while doing lazy loading of modal dialog?
我正在使用 Angular 8,我想在我的项目中延迟加载对话框。执行此操作时出现以下错误:-
No component factory found for EditProfileComponent. Did you add it to
@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 { }
如何解决问题?
如所述 by Fateh Mohamed:
...if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add:
exports: [ ConfirmComponent ]
因此,只需将 EditProfileComponent 添加到 editprofile.module.ts 的导出数组中,就可以开始了!
编码愉快:)
我正在使用 Angular 8,我想在我的项目中延迟加载对话框。执行此操作时出现以下错误:-
No component factory found for EditProfileComponent. Did you add it to @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 { }
如何解决问题?
如所述
...if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add:
exports: [ ConfirmComponent ]
因此,只需将 EditProfileComponent 添加到 editprofile.module.ts 的导出数组中,就可以开始了!
编码愉快:)