Go to src >> app >> and open app.routing.ts file and add routing like this:-

{ path: 'about/:keyword',component: AboutComponent }
{ path: 'cart', component: CartComponent }

For Reference: https://angular.io/guide/router​‌

1. Router navigate with params

If you want to use this routing in component. then go to src >> app >> and open component.ts file then do the followings:-‌

a) Add the the routing at top of the file like this:

import { Router} from '@angular/router';constructor(private router: Router){}

b) Add in your desire component and add these line of code in your function:- For Example:-

gotoAbout(){ 
    this.router.navigate(['/about'], { queryParams: { keyword: 'Test' } });
}

For Reference :- https://alligator.io/angular/query-parameters/​‌

2. RouterLink and RouterLinkActive

When the HTML element with RouterLink binding is clicked then the CSS classes bound with RouterLinkActive will be active. These directives are used are follows.

<a routerLink="/cart" routerLinkActive="active-link">Cart</a><a [routerLink]="['/cart']">Cart</a> 

For Reference :- https://angular.io/guide/router#router-links​‌

3. Lazy Loading

Lazy Loading in Embryo we need to create a routing module and a module for that component. ‌

1.Go to src >> app >> and open app.routing.ts file and add routing like this:-

{   
     path: 'products',   
     loadChildren: './Products/Products.module#ProductsModule'
}

2. Inside the products module routing, Go to src >> app >> Products and open Products.routing.ts file and add routing like this:-

{ path: '', component: ProductsListComponent }

For Reference :- https://angular.io/guide/lazy-loading-ngmodules​