Angular 9路由到延迟加载模块中的子组件
我在将安装程序路由到延迟加载模块中的子组件时遇到问题 app.routing.tsAngular 9路由到延迟加载模块中的子组件,angular,angular-routing,angular-router,angular9,Angular,Angular Routing,Angular Router,Angular9,我在将安装程序路由到延迟加载模块中的子组件时遇到问题 app.routing.ts export const routes: Routes = [ { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), }, ]; export const routes: Routes = [ {
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
admin.routing.ts
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
当我转到应用程序时,该应用程序未按预期重定向到,而是重定向到
AdminPanelComponent是管理模块的UI布局组件
有什么建议吗
更新:
没有子组件的延迟加载模块也存在同样的问题
app.routing.ts
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
agent.routing.ts
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
当我转到应用程序时,应用程序被重定向到
更新:
我发现了一个问题并修复了它,但无法解释为什么它不工作
app.routing.ts
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
管理和代理模块都使用auth模块
auth.routing.ts
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
export const routes: Routes = [
{
path: '',
component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'user/list',
pathMatch: 'full'
},
{
path: 'user/list',
canActivate: [AdminGuard],
component: UserListComponent,
},
{
path: 'user/new',
canActivate: [AdminGuard],
component: UserComponent,
}
]
}
];
export const routes: Routes = [
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
component: AgentPanelComponent,
},
];
export const routes: Routes = [
{
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
{
path: 'agent',
loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
},
];
export const routes: Routes = [
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
{
path: 'password-reset',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPasswordResetComponent
},
];
在auth.routing.ts中,我已从此更改了路径
{
path: '',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
对此
{
path: 'login',
canActivate: [RedirectIfLoggedInGuard],
component: LoginPageComponent
},
现在它运行良好。我已经在下面的stackBlitz中解决了您的问题,有很多方法会出错。因此,我不需要解释所有这些,您可以看看这个实现吗 另外,如果您在下面的评论中有任何特殊问题,我会尽力帮助您
如果它解决了你的问题。请在admin.routing.ts中将此答案标记为已接受,因为您需要确保在导入中添加:
RouterModule.forChild(路由)
在app.routing.ts中,您需要添加
RouterModule.forRoot(routes)
您可能做了什么,并创建了无限递归?您在AdminModule中导入了AuthModule,而AdminModule又为admin模块中的登录装载了路由。要确认问题,请尝试导航到/admin/login。您将看到它将加载LoginComponent,这不是您所期望的情况。您创建无限递归的原因可能是因为您的守卫现在同时在/login路由和/admin路由上运行,它们试图重定向到自身。您能在上创建一个可复制的示例吗?它一定是我的代码中的其他内容。。。您的解决方案与我的解决方案相同,并且您的解决方案工作正常。您可以检查这两个模块中的RouterModule导入吗?您的浏览器的控制台窗口中一定出现了某种错误。您可以共享它吗?是的,在app.module.ts中,我有RouterModule.forRoot(路由),在admin.module.ts RouterModule.forChild(路由)中。控制台中没有错误,只是警告:“限制导航以防止浏览器挂起。请参阅。命令行开关-禁用ipc泛洪保护可用于绕过保护”这不是问题,我的所有导入都很好。请查看我更新的问题以获得解决方案