Why routerLink is not working when everything is configured correctly

Question

Part of view where routerLink is located

<p><a routerLink="/registration" class="nav-link">Зарегистрироваться</a></p>

My app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { AppComponent } from './components/app.component';
import { TestStartComponent } from './components/test-start.component';
import { TestListComponent } from './components/test-list.component';
import { RegistrationComponent } from './components/registration.component';


const appRoutes: Routes = [
    { path: '', component: TestListComponent },
    { path: 'teststart/:id', component: TestStartComponent },
    { path: '**', redirectTo: '/' },
    { path: 'registration', component: RegistrationComponent}
];

@NgModule({
    imports: [BrowserModule, [CommonModule], FormsModule, HttpClientModule, RouterModule.forRoot(appRoutes)],
    declarations: [AppComponent, TestListComponent, TestStartComponent, RegistrationComponent],
    bootstrap: [AppComponent]
})

My RegistrationComponent

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../models/user';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

@Component({
    templateUrl: '../views/registration.component.html',
    providers: [UserService]
})

export class RegistrationComponent implements OnInit {
    constructor(
        private userService: UserService
    ) { }

    ngOnInit() {
        console.log("sas");
    }

My registration.component.html

<p>sas</p>

When I click on the link - nothing happened. Another routerLinks are working correctly.

Answer 1

Please, add pathMatch: 'full' to the following route:

{ path: '', component: TestListComponent }

And move the following route to the end:

{ path: '**', redirectTo: '/' }

So the end result would be:

    { path: '', component: TestListComponent, pathMatch: 'full' },
    { path: 'teststart/:id', component: TestStartComponent },
    { path: 'registration', component: RegistrationComponent},
    { path: '**', redirectTo: '/' }

According to the Angular official documentation:

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

For the wildcard, the official docs say:

A URL string that uses router matching notation. Can be a wild card (**) that matches any URL (see Usage Notes below). Default is "/" (the root path).

Finally, take into consideration that the order in which you specify your routes is important. Think it as if the Angular engine is going one by one from top to bottom scanning each one to see which one matches the requested url.