angular - routerLink でログイン ページを開くことができない

Question

ユーザーがヘッダー コンポーネントにある [ログイン/サインアップ] オプションをクリックするたびに、/login ページに移動しようとしています。しかし、ログイン/サインアップをクリックするたびに、同じページに残ります。

私の app-routing.module.ts ファイルは以下の通りです

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

これを呼び出そうとしているHTMLタグは、header.component.htmlに配置されています

<a data-toggle="tooltip" title="Sign In/Sign Up" routerLink="/login" routerLinkActive="active" class="login">Login/SignUp</a>

また、 app.component.html に router-outlet を追加しました

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

ただし、ブラウザにlocalhost:4200/loginと入力して手動でログイン ページに移動すると、ログイン ページが正常に開きます。

私の完全なコードはここにあります -

https://github.com/vibhorgoyal18/atest-blog/tree/master/src/app