Routing is used to separate parts of application by using URL to for location path. Angular Router is used to navigate from one view to another as performed application tasks by user.

In Angular, there are three main components that are used to configure routing:
* Routes describe routes of the application
* RouterOutlet is a a component for “placeholder” that contains each route’s content
* RouterLink is used to link to routes

<base href>
base element is added to index.html file as it is first child in the head tag. It tells router about composing navigation URLs. If the app folder is root of the application set href value as shown below:

src/index.html (base-href)

 <base href="/">

Router imports
Angular Router is a service provided by angular as it has library package '@angular/router'. You have to import it in your module file in order to use its services.

src/app/app.module.ts (import)
      
import { RouterModule, Routes } from '@angular/router';

Configuration

You have to configure route in order to provide routes for your application. When URL in the browser changes, router find out corresponding Route by which it can get component to display on screen. Here is an example which shows four route definitions and configures it via RouterModule.forRoot method and result is added to import array of AppModule.

src/app/app.module.ts (excerpt)
      
const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'home/:id',      component: HomeDetailComponent },
  {
    path: 'users',
    component: UserListComponent,
    data: { title: 'Users List' }
  },
  { path: '',
    redirectTo: '/users',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

appRoutes: an array of routes to describe how to navigate. It is passed as a parameter in service of configuring router.
Path: URL path to the component. some id can be added to the path as /pathname/:id.
Data: this property can be used to store some data with particular route. you can use it to store page titles, read-only, static data.
empty path: it is to represent default path for application.
The ** path in the last route is a wildcard. In case the url requested does not match any path for routes which were defined in the configuration prior then the route will be selected by the router. This is useful for displaying a "404 - Not Found" page or redirecting to another route.

Router outlet

In this configuration, when the browser URL for this application becomes /users, the router matches that URL to the route path /users and displays the UserListComponent after a RouterOutlet that you've placed in the host view's HTML.
     

<router-outlet></router-outlet>
<!-- Routed views go here -->

Router links
Router links are used to navigate views in application.
for example:

src/app/app.component.ts (template)
      
template: `
  <h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/users" routerLinkActive="active">Users</a>
  </nav>
  <router-outlet></router-outlet>
`

The RouterLink is a directive on anchor tag that includes the path for the router.
The RouterLinkActive directive distinguish the anchor for the selected "active" route.