Angular路由打开错误组件
Angular Routing opening wrong component
我想延迟加载一个模块,该模块不应该延迟加载其他模块。我设法让延迟加载工作,但它会向我显示错误的组件,即使路由是正确的。
如您所见,路径是正确的,因为我希望显示“Push-Campaign”页面。然后它向我展示了“客户定位”组件。
应用-routing.module.ts
const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];
const routes: Routes = [
{
path: 'admin',
data: {
authorities: [Authority.ADMIN],
},
canActivate: [UserRouteAccessService],
loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule),
},
{
path: 'account',
loadChildren: () => import('./account/account.module').then(m => m.AccountModule),
},
{
path: 'recommended-section',
loadChildren: () => import('./entities/recommended-section/recommended-section.module').then(m=> m.RecommendedSectionModule),
},
{
path: 'push-campaign',
loadChildren: () => import('./entities/push-campaign/push-campaign.module').then(m=> m.PushCampaignModule),
},
{
path: 'customer',
loadChildren: () => import('./entities/customer/customer.module').then(m=> m.CustomerModule),
},
...LAYOUT_ROUTES,
]
@NgModule({
imports: [
RouterModule.forRoot(routes,{ enableTracing: DEBUG_INFO_ENABLED }),],
exports: [RouterModule],
})
export class AppRoutingModule {}
推送-campaign.module.ts
@NgModule({
imports: [SharedModule, TargetingModule, PushCampaignRoutingModule, PushChannelModule, AppDeepLinkModule, AudienceModule, PushCampaignDeploymentModule],
declarations: [
PushCampaignComponent,
PushCampaignDetailComponent,
PushCampaignUpdateComponent,
PushCampaignDeleteDialogComponent,
PushCampaignPreviewComponent,
],
entryComponents: [PushCampaignDeleteDialogComponent],
})
export class PushCampaignModule {}
targeting.module.ts
@NgModule({
imports: [SharedModule, ClientTargetingModule],
declarations: [
TargetingComponent,
TargetingDetailComponent,
TargetingUpdateComponent,
TargetingDeleteDialogComponent,
TargetingClientComponent,
],
exports: [TargetingUpdateComponent],
entryComponents: [TargetingDeleteDialogComponent],
})
export class TargetingModule {}
客户端-targeting.module.ts
@NgModule({
imports: [SharedModule, RouterModule.forChild(clientTargetingRoute)],
declarations: [
ClientTargetingComponent,
ClientTargetingDetailComponent,
ClientTargetingUpdateComponent,
ClientTargetingDeleteDialogComponent,
],
entryComponents: [ClientTargetingDeleteDialogComponent],
})
export class ClientTargetingModule {}
为什么会这样,我该如何解决?
提前感谢您的帮助。
所以我修好了!正如评论中所述,我添加了一个 routing.module,但它仍然不起作用......所以我只是尝试并最终设法通过更改 push-campaign.module.ts
中的导入顺序来让它工作:
@NgModule({
imports: [SharedModule, RouterModule.forChild(pushCampaignRouterModule), TargetingModule, ...
为什么 RouterModule.forChild()
必须在所有其他导入模块之前?
我想延迟加载一个模块,该模块不应该延迟加载其他模块。我设法让延迟加载工作,但它会向我显示错误的组件,即使路由是正确的。
如您所见,路径是正确的,因为我希望显示“Push-Campaign”页面。然后它向我展示了“客户定位”组件。
应用-routing.module.ts
const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];
const routes: Routes = [
{
path: 'admin',
data: {
authorities: [Authority.ADMIN],
},
canActivate: [UserRouteAccessService],
loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule),
},
{
path: 'account',
loadChildren: () => import('./account/account.module').then(m => m.AccountModule),
},
{
path: 'recommended-section',
loadChildren: () => import('./entities/recommended-section/recommended-section.module').then(m=> m.RecommendedSectionModule),
},
{
path: 'push-campaign',
loadChildren: () => import('./entities/push-campaign/push-campaign.module').then(m=> m.PushCampaignModule),
},
{
path: 'customer',
loadChildren: () => import('./entities/customer/customer.module').then(m=> m.CustomerModule),
},
...LAYOUT_ROUTES,
]
@NgModule({
imports: [
RouterModule.forRoot(routes,{ enableTracing: DEBUG_INFO_ENABLED }),],
exports: [RouterModule],
})
export class AppRoutingModule {}
推送-campaign.module.ts
@NgModule({
imports: [SharedModule, TargetingModule, PushCampaignRoutingModule, PushChannelModule, AppDeepLinkModule, AudienceModule, PushCampaignDeploymentModule],
declarations: [
PushCampaignComponent,
PushCampaignDetailComponent,
PushCampaignUpdateComponent,
PushCampaignDeleteDialogComponent,
PushCampaignPreviewComponent,
],
entryComponents: [PushCampaignDeleteDialogComponent],
})
export class PushCampaignModule {}
targeting.module.ts
@NgModule({
imports: [SharedModule, ClientTargetingModule],
declarations: [
TargetingComponent,
TargetingDetailComponent,
TargetingUpdateComponent,
TargetingDeleteDialogComponent,
TargetingClientComponent,
],
exports: [TargetingUpdateComponent],
entryComponents: [TargetingDeleteDialogComponent],
})
export class TargetingModule {}
客户端-targeting.module.ts
@NgModule({
imports: [SharedModule, RouterModule.forChild(clientTargetingRoute)],
declarations: [
ClientTargetingComponent,
ClientTargetingDetailComponent,
ClientTargetingUpdateComponent,
ClientTargetingDeleteDialogComponent,
],
entryComponents: [ClientTargetingDeleteDialogComponent],
})
export class ClientTargetingModule {}
为什么会这样,我该如何解决?
提前感谢您的帮助。
所以我修好了!正如评论中所述,我添加了一个 routing.module,但它仍然不起作用......所以我只是尝试并最终设法通过更改 push-campaign.module.ts
中的导入顺序来让它工作:
@NgModule({
imports: [SharedModule, RouterModule.forChild(pushCampaignRouterModule), TargetingModule, ...
为什么 RouterModule.forChild()
必须在所有其他导入模块之前?