In Angular, can I use same module for two different path?

Question

I am implementing lazy loading in Angular 8, but got stuck in middle. For login and logout I have used same module like below.

    const myroutes : Routes = [        
        {path : 'login',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},       
        {path : 'logout',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},
        {path : 'contact',loadChildren:()=>import('./contact/contact.module').then(m=>m.ContactModule)},
        {path : 'home',loadChildren : ()=> import('./home/home.module').then(m=>m.HomeModule)},
     ]

and in login.module.ts used like

const myroutes : Routes = [
  {path : '',component : LoginComponent},
  {path : 'logout',component : LogoutComponent}
]

Template which has all links is like below

<nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                    <a class="nav-link" routerLink="home">Home</a>
            </li> 
            <li class="nav-item">
                    <a class="nav-link" routerLink="contact">Contact</a>
            </li>
            <li class="nav-item">
                    <a class="nav-link" routerLink="login">Login</a>
            </li>
            <li class="nav-item">
                        <a class="nav-link" routerLink="logout">logout</a>
            </li>
        </ul>
      </nav>
<router-outlet></router-outlet>

But whenever I am clicking on logout link is not going in LogoutComponent.ts is always calling login Component.

What might be going on?

The route to your logout component is /logout/logout or /login/logout. Not /logout, which load the login module, and then displays the component for the empty route of this module, which is the login component. — JB Nizet
– JB Nizet, Commented Sep 22, 2019 at 12:10

Amine · Accepted Answer · 2020-10-07 15:16:34Z

3

The correct path to your logout component is the concatenation of login and logout so:

/login/logout

So your routerLink becomes like this:

routerLink="login/logout"

edited Oct 7, 2020 at 15:16

answered Sep 22, 2019 at 12:14

Amine

3312 silver badges7 bronze badges

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

Comments

Indrakumara · Accepted Answer · 2019-09-22 13:29:45Z

Your logout component should be /login/logout instead of /logout, which load the login module, and no need to load login module twice since logout is a child of login route

logout route removed from the main route

 const myroutes : Routes = [        
        {path : 'login',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},       
        {path : 'contact',loadChildren:()=>import('./contact/contact.module').then(m=>m.ContactModule)},
        {path : 'home',loadChildren : ()=> import('./home/home.module').then(m=>m.HomeModule)},
     ]

change router link to routerLink="login/logout"

-

<nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                    <a class="nav-link" routerLink="home">Home</a>
            </li> 
            <li class="nav-item">
                    <a class="nav-link" routerLink="contact">Contact</a>
            </li>
            <li class="nav-item">
                    <a class="nav-link" routerLink="login">Login</a>
            </li>
            <li class="nav-item">
                        <a class="nav-link" routerLink="login/logout">logout</a>
            </li>
        </ul>

I add a stackblitz URL for your reference

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

Collectives™ on Stack Overflow

In Angular, can I use same module for two different path?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related