Angular 9路由到延迟加载模块中的子组件

Question

我在将设置路由到延迟加载的模块中的子组件时遇到问题。

app.routing.ts

export const routes: Routes = [
    {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    },
];

admin.routing.ts

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,
            }
        ]
    }

];

当我转到https://localhost/admin时，应用程序未按预期重定向到https://localhost/admin/user/list，而是重定向到https://localhost。

AdminPanelComponent是用于管理模块的UI布局组件。

有什么建议吗？

更新：没有子组件的延迟加载模块的相同问题

app.routing.ts

export const routes: Routes = [
    {
        path: 'agent',
        loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
    },
];

agent.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: AgentPanelComponent,
    },

];

当我转到https://localhost/agent时，应用程序重定向到https://localhost。

Answer 1

我已经在stackBlitz下面解决了您的问题，有很多方法可能会出错。因此，除了我不解释所有内容之外，您还可以看看这个实现吗？

https://stackblitz.com/edit/angular-j1s19b

还请问您在下面的评论中是否有任何特殊问题，我会尽力帮助您。

如果可以解决您的问题。请将此答案标记为可接受，😊。

Answer 2

在admin.routing.ts中，您需要确保在RouterModule.forChild(routes)中添加：imports。

在app.routing.ts中，您需要添加RouterModule.forRoot(routes)