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

Question

I placed AppRoutingModuleinside the importsclass @NgModuleclass AppModule.

AppRoutingModule is defined as follows:

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

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

I posted <router-outlet></router-outlet>in app.component.html.

Pages display 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 the home page. I tried the following solutions:

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

Firstly, when I put routerLink on an element <img>, such a directive was not found. Then in the element <a>it makes a random one <a href="/home">from routerLink and performs a complete page reload! Should you only reload the content <router-outlet>?

Perhaps it makes some difference that my layout looks like this:

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

routerLink <header-bar> () <router-outlet> ?

, routerLink, AppComonent, ! RouterLink -!:

<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

. AppRoutingModule

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 {}

Answer 2

, , , . , () . -, angular 4 - github: https://github.com/MarkPieszak/aspnetcore-angular2-universal

• ASP NET Core SPA, yoman.

npm install -g yo generator-aspnetcore-spa

cd , , , :

yo aspnetcore-spa

2. , OpenLite.

3. , angular 2+ → angular 4+, , , , webpack, tsconfig .. . github:
   https://github.com/MarkPieszak/aspnetcore-angular2-universal

4. , , , , :

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

angular, , :

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS. platformUniversalDynamic => platformBrowserDynamic.