module and Group routing angular13

 If there are n no of module then:----

1:--create a module with routing

ng g m Admin --routing

create component inside it:--

ng g c Admin/list

ng g c Admin/login

inside routing file:

const routes: Routes = [

  {

    path:"list",component:ListComponent

  },

  {

    path:"login",component:LoginComponent

  }

];

inside AppComponent.html:

<ul>

  <li>

<a routerLink='list'>list</a>

  </li>

  <li>

<a routerLink="login">login</a>

  </li>

</ul>

<router-outlet></router-outlet>

inside app.module.ts:

import[] section

    AdminModule,

    AdminRoutingModule

note:

like we have customer module 

if there are also the same component and same link then how it is possible to differentiate it  the URLs

in that scenario u have to use group routing

ex:---

create one more module as customer add two component inside it list and admin 

add  two route in your app.html same as before 

u will be not able to locate in your url

for that change in your both the routing file

 Routes = [

  {path:'admin',children:[

    {

      path:"list",component:ListComponent

    },

    {

      path:"login",component:LoginComponent

    }

  ]}

customer:---

Routes = [

  {path:'customer',children:[

    {

      path:"list",component:ListComponent

    },

    {

      path:"login",component:LoginComponent

    }

  ]}];

and then in your appcomponent.html file:

<h1>admin menu</h1>

<ul>

  <li>

<a routerLink='admin/list'>list</a>

  </li>

  <li>

<a routerLink="admin/login">login</a>

  </li>

</ul>

<h1>customer Menu</h1>

<ul>

  <li>

<a routerLink='customer/list'>list</a>

  </li>

  <li>

<a routerLink="customer/login">login</a>

  </li>

</ul>

<router-outlet></router-outlet>