Angular child Routing

 1.Create few component that u want to route:

2.Add in app-routingmodule.ts

import { AboutUsComponent } 

from './about-us/about-us.component';

import { AboutCompanyComponent }

 from './about-company/about-company.component';

import { AboutusComponent }

 from './aboutus/aboutus.component';

hey

import { Component, NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import {HomeComponent} from './home/home.component';

import { AboutUsComponent } from './about-us/about-us.component';

import { AboutCompanyComponent } from './about-company/about-company.component';

import { AboutusComponent } from './aboutus/aboutus.component';

import { ProfileComponent } from './profile/profile.component';

import { UserComponent } from './user/user.component';

import { ErrorPageComponent } from './error-page/error-page.component';

const routes: Routes = [

  

  { path: '', component: HomeComponent },

  { path: 'Aboutus', component:AboutUsComponent,

children:[

  {path: 'compony', component:AboutCompanyComponent},

  {path: 'Aboutus', component:AboutusComponent,}

]

},

  {path:'Profile',component:ProfileComponent},

  {path:'User/:id',component:UserComponent},

  {path:'User/:id',component:UserComponent},

  { path: '**', component:ErrorPageComponent  },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Add link in that component where you want to sub routine

    

    this is about us page

    <ul>

        <li><a  routerLink="compony">aboutcompony</a></li>

        <li><a routerLink="Aboutus">AboutUs</a> </li>

    

     

     

  </ul>

<router-outlet></router-outlet>

remove activerouterLinkOption