Две маршрутизации включаются одновременно

Question

rout.ts

import { Routes } from '@angular/router';

import { SearchCitiesComponent } from '../search-cities/search-cities.component';
import { AddcityComponent } from '../addcity/addcity.component';
import { DetailsComponent } from '../details/details.component';
import { from } from 'rxjs';

export const routes: Routes = [

    {path: 'search-cities', component: SearchCitiesComponent ,data:{animation : "searchPage"}},
    {path: '', component: AddcityComponent , pathMatch: "full", data: {animation : "headerPage"} },
    {path:'details/:name', component: DetailsComponent , data: { animation : "detailsPage"}}
];

app-routing.component.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';

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

header. html

<div>
  <mat-toolbar [ngStyle.lt-sm]="{ 'height.px': 100 }">
    <mat-toolbar-row>
      <mat-icon
        style="
          font-size: 32px;
          cursor: pointer;
          padding-bottom: 10px;
          padding-left: 8px;
        "
        (click)="side_nav.open()"
        >menu</mat-icon
      >
      <span
        [ngStyle.lt-sm]="{ flex: '0 0 30px' }"
        [ngStyle.gt-xs]="{ flex: '0 0 30px' }"
      ></span>
      <img
        src="../assets/weather_images/logo.png"
        style="width: 32.4px; padding-left: 5px;"
      />&nbsp;&nbsp;&nbsp;&nbsp;
      <span
        style="
          padding-top: 3px;
          letter-spacing: 3px;
          font-size: 22.1px;
          font-weight: bolder;
          font-family: SegoeUI-Semibold, Segoe UI;
        "
      >
        Minimus
      </span>

      <span [ngStyle.gt-xs]="{ flex: '1 1 auto' }"></span>
      <div>
        <span
          fxHide.lt-sm="true"
          style="font-weight: bolder; font-size: 21px; letter-spacing: 1px;"
          >TODAY</span
        >
      </div>
      <span [ngStyle.gt-xs]="{ flex: '1 1 auto' }"></span>
      <div fxHide.lt-sm="true">
        <span
          style="
            padding-bottom: 5px;
            font-family: sans-serif;
            letter-spacing: 1px;
            font-size: 13px;
          "
          >LIGHT</span
        >&nbsp;
        <mat-slide-toggle
          [checked]="isDarkTheme | async"
          (change)="toggleDarkTheme($event.checked)"
        ></mat-slide-toggle
        >&nbsp;
        <span
          style="
            font-family: sans-serif;
            letter-spacing: 1px;
            font-size: 13px;
            padding-bottom: 5px;
          "
          >DARK</span
        >
      </div>
    </mat-toolbar-row>
    <mat-toolbar-row fxHide.lt-sm="false" fxHide.gt-xs="true">
      <span style="margin: 0 auto;">TODAY</span>
    </mat-toolbar-row>
    <mat-toolbar-row fxHide.lt-sm="false" fxHide.gt-xs="true">
      <span style="margin: 0 auto;">
        <span>LIGHT</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-slide-toggle
          [checked]="isDarkTheme | async"
          (change)="toggleDarkTheme($event.checked)"
        ></mat-slide-toggle
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span>DARK</span>
      </span>
    </mat-toolbar-row>
  </mat-toolbar>
</div>
<mat-sidenav-container
  [ngClass]="{ 'dark-theme': isDarkTheme | async }"
  style="width: 100%;"
>
  <mat-sidenav #side_nav style="height: 100%; width: 400px;">
    <br /><br />
    <div style="margin-left: 40px;">
      <div routerLinkActive="link_active" style="cursor: pointer;" >
        <span routerLink="" (click)="side_nav.close()" style="font-size: 16px;"> Home </span>
      </div>
      <br /><br /><br />
      <div routerLinkActive="link_active" style="cursor: pointer;">
        <span routerLink="/search-cities" (click)="side_nav.close()" style="font-size: 18px;"
          >Add City</span
        >
      </div>
    </div>
  </mat-sidenav>

  <mat-sidenav-content
    ><br />
    <div [@fade]="prepareRoute(o)" [@flyInOut]="prepareRoute(o)">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

header.component.s css

.link_active{
    color: #495cfc;
    border-bottom: 1px solid #495cfc;
    padding-bottom:16px ;
}

app.component. html

<div [ngClass]="{'dark-theme': isDarkTheme | async}">
    <div class="mat-app-background">
        <app-header> </app-header>



        <div class="content">
        </div>
    </div>
</div>

Как показано на этом рисунке, обе ссылки активируются. Кто-нибудь, пожалуйста, помогите ..

Много искал в Google, но ничего не смог найти. Скажите пожалуйста, где я не прав ..... Есть ли какая-то ошибка в маршрутах, которые я указал, или это что-то еще?