How to add 2 non-SPA pages?

Question

JavaScript

The problem is strange, but please help me to solve it.
1.
In angular6, I made 3 pages with old-style routing (i.e. url with a grid). I achieved this with the help of a feature that the developers of the framework left for backwards compatibility:

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],

2.
Next, I needed to make sure that when a user enters the /login page, the page is refreshed. That is, in fact, the /login page does not work like a SPA, and the rest of the pages work like a SPA. I achieved this like this:
tpl:

<a href="/login">Login</a> |

    <a routerLinkActive="active" 
       routerLink="/home">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 
      
    <router-outlet></router-outlet>

router:

imports: [
    RouterModule.forRoot([
      { path: '', redirectTo: '/login', pathMatch: 'full'},
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ], { useHash: true })
  ],

3.
Now I would like to have 2 such pages. That is, so that a refresh occurs when the user goes to the /login and /home pages.
Please help me implement this. Here is a LIVE DEMO with the example described above