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?

Answer 1

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