Angular 4+: RouterLink in <a> element not working properly

Question

I have placed my AppRoutingModule inside imports of @NgModule of AppModule class.

AppRoutingModule is defined in such way:

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

I have placed <router-outlet></router-outlet> in the app.component.html.

Pages displays correctly based on URLs:

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

The problem is in my header.component.ts where I am trying to add routerLink to home page. I have tried such solutions:

<img routerLink="home" ... />
<img [routerLink]="/home" ... />
<a routerLink="home"> <img ... /></a>
<a [routerLink]="home" ... ><img ... /></a>

Firstly when I placed routerLink in <img> element such directive hasn't been found. Then in <a> element it makes casual <a href="/home"> from routerLink and makes full page reloading ! Shouldn't it reload only content of <router-outlet>?

Maybe it has some meaning that my layout looks like this:

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

and routerLink is placed on element in children component <header-bar> (logo) and should navigate on <router-outlet> in its parent?

But I have also tested this behaviour using routerLinks placed directly inside AppComonent and nothing has changed! RouterLink still reloads the webpage!:

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>

Answer 1

You need more to make routing work. Here is how your AppRoutingModule file should look like

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent, LessonOffersComponent } from somewhere;

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

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