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

Question

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

app.routing.ts

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

管理员路由.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),
    },
];

代理路由.ts

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

];

当我去 https://localhost/agent应用被重定向到 https://localhost .

更新:
我发现了一个问题并修复了它，但无法解释为什么它不起作用。

app.routing.ts

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

    ];

admin 和 agent 模块都在使用 auth 模块。

auth.routing.ts

export const routes: Routes = [
    {
        path: '',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPageComponent
    },
    {
        path: 'password-reset',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPasswordResetComponent
    },
];

在 auth.routing.ts 我更改了 path由此

{
            path: '',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

对此

{
            path: 'login',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

它现在工作正常。

Answer 1

我已经在下面的 stackBlitz 中解决了你的问题，有很多方法可能会出错。所以不是我解释这一切，你能看看这个实现吗？

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

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

如果它解决了你的问题。请将此答案标记为已接受它的值(value)😊。