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.

Can you create a reproducible example on stackblitz.com ?

user13258211
– user13258211

2020-04-14 09:15:39 +00:00
Commented Apr 14, 2020 at 9:15 — user13258211
– user13258211, Commented Apr 14, 2020 at 9:15

Indrajeet · Accepted Answer · 2020-04-14 09:14:07Z

4

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 😊.

answered Apr 14, 2020 at 9:14

Indrajeet

5013 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

aponski Over a year ago

It must be something else in my code... Your solution is the same as mine and yours is working fine.

Indrajeet Over a year ago

Can you check the RouterModule imports in both the modules

Indrajeet Over a year ago

also you must be getting some sort of error in the console window of your browser.

Indrajeet Over a year ago

can you share it?

aponski Over a year ago

Yes in app.module.ts I have RouterModule.forRoot(routes), in admin.module.ts RouterModule.forChild(routes). No errors in console, just warning: "Throttling navigation to prevent the browser from hanging. See crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection"

|

itsundefined · Accepted Answer · 2020-06-02 22:12:22Z

0

What you probably did and created the infinite recursion is you imported AuthModule inside the AdminModule which in turn mounted the routes for the login in the admin module. To confirm the issue try navigating to /admin/login. You will see that it will load up the LoginComponent which is not what you expected to happen. The reason you probably created the infinite recursion is because your guard is now running both on /login routes and /admin routes which tries to redirect to itself.

edited Jun 2, 2020 at 22:12

answered Jun 2, 2020 at 22:02

itsundefined

1,4462 gold badges13 silver badges33 bronze badges

Comments

Omar · Accepted Answer · 2020-04-14 10:02:12Z

-1

In admin.routing.ts you need to make sure you add: RouterModule.forChild(routes) in the imports.

In app.routing.ts you need to add RouterModule.forRoot(routes)

answered Apr 14, 2020 at 10:02

Omar

825 bronze badges

1 Comment

aponski Over a year ago

This was not the problem, all my imports were fine. Please see my updated question for solution

Collectives™ on Stack Overflow

Angular 9 routing to child component in lazy loaded module

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related