Angular 9 routing to child component in lazy loaded module

Question

I have problem with routing setup to child component in a lazy loaded module.

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

];

When I go to https://localhost/admin app is not redirected to https://localhost/admin/user/list as expected but to https://localhost.

AdminPanelComponent is a UI layout component for admin module.

Any suggestions?

UPDATE: Same problem with lazy loaded module without child components

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

];

When I go to https://localhost/agent app is redirected to https://localhost.

UPDATE: I found a problem and fixed it but can't explain why it was not working.

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

    ];

Both admin and agent modules are using auth module.

auth.routing.ts

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

In auth.routing.ts I've changed path from this

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

to this

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

And it's working fine now.

Answer 1

I have solved your problem in below stackBlitz, there are many ways it can go wrong. so instead of I explaining it all, can you have a look at this implementation?

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

also ask if you have any particular problem in comment below, I'll try to help you there.

If it solves your problem. please mark this answer as accepted for what it's worth 😊.