Used of [routerLink]. Now is not blink

src/app/app.component.html

@@ -20,10 +20,10 @@
   </div>
   <div class="container d-flex justify-content-between align-items-center">
      <!-- Navbar links -->
-      <a class="navbar-brand" href="/about-me">{{ 'topBar.aboutMe' | translate }}</a>  
-      <a class="navbar-brand" href="/asset-calculator">{{ 'topBar.depreciationCalculator' | translate }}</a>  
-      <a class="navbar-brand" href="/quotes">{{ 'topBar.courses' | translate }}</a>
-      <a class="navbar-brand" href="/friendly-pages">{{ 'topBar.friendlyPages' | translate }}</a>
+      <a class="navbar-brand"  [routerLink]="'/about-me'">{{ 'topBar.aboutMe' | translate }}</a>  
+      <a class="navbar-brand" [routerLink]="'/asset-calculator'">{{ 'topBar.depreciationCalculator' | translate }}</a>  
+      <a class="navbar-brand" [routerLink]="'/quotes'">{{ 'topBar.courses' | translate }}</a>
+      <a class="navbar-brand" [routerLink]="'/friendly-pages'">{{ 'topBar.friendlyPages' | translate }}</a>
   </div>
 </nav>
 

src/app/app.component.ts

@@ -1,12 +1,12 @@
 import { Component, HostListener, OnDestroy } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, RouterModule } from '@angular/router';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, TranslateModule],
+  imports: [RouterOutlet, TranslateModule, RouterModule],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'], // Fixed typo
 })

src/app/app.routes.ts

@@ -9,9 +9,8 @@ import { FriendlyPagesComponent } from './friendly-pages/friendly-pages.componen
 
 export const routes: Routes = [ 
     { 
-        path: "", 
-        title: "Kalkulator amortyzacyjny",
-        component:AssetCalculatorComponent  
+        path: '', redirectTo: 'asset-calculator', pathMatch: 'full'
+   
     },
     {   
         path: "about-me",