Any url typed on the address bar navigates back to the root url in Angular 4

The routing works perfectly if one click on any of the anchor tags. The problem occurs only if the user manually types the url on the address bar

For example, If one click on sign in link from the top navigation bar of the web page, then angular is correctly loading the sign in component, but if the user types http://localhost:4200/sign-in, it loads the home component

Specification

Ubuntu 17.10 Node 6.11.4 NPM 5.5.1

The code of the application is below

src/app/app.router.ts

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { HomeComponent } from './home/home.component';
import { Route } from '@angular/router';

export const routes: Route[] = [
  { path: 'sign-up', component: SignUpComponent},
  { path: 'sign-in', component: SignInComponent},
  { path: 'admin', pathMatch: 'full', loadChildren: 'app/admin/admin.module#AdminModule'},
  { path: 'dashboard', loadChildren: 'app/user/user.module#UserModule'},
  { path: '', pathMatch: 'full', component: HomeComponent},
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent}
];

src/app/app.component.html

<top-navigation></top-navigation>
<router-outlet></router-outlet>

src/app/shared/top-navigation/top-navigation.component.html

<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">RS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
    aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li *ngIf="isLoggedIn" class="nav-item">
          <a class="nav-link" [routerLink]="['/dashboard']" >Dashboard</a>
      </li>
    </ul>

    <!-- SIGNED IN USER -->
    <div *ngIf="isLoggedIn" class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{currentUser.username}}
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" routerLink="/me" routerLinkActive="active">Me</a>
        <a class="nav-link disabled" href="#">Disabled</a>
        <a class="nav-link" (click)="authService.logout()">Logout</a>
      </div>
    </div> <!-- [/END] SIGNED IN USER -->

    <!-- NO USER -->
    <div *ngIf="!isLoggedIn" class="nav-item">
      <a class="nav-link" [routerLink]="['/admin']">Sign In</a>
    </div>

  </div>
</nav>

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

</body>
</html>