Проблема с волновым эффектом в Angular 8 с Bootstrap Материал

Question

У меня проблема с волновым эффектом в теге, который содержит значок материала. Эффект ряби работает нормально, когда страница загружается, но когда я открываю другой кран и загружаю страницу во второй вкладке, эффект ряби не работает, и если я перезагрузлю страницу с помощью F5, эффект снова будет работать.

Со мной происходит следующее:

1. Я запускаю проект и страница загружается. Эффект пульсации работает нормально, когда я нажимаю на иконку «SEMÁFORO»:

Эффект отлично работает

Я открываю новый тег и загружаю ту же страницу. Эффект ряби не работает.

Эффект не работает

Я нажимаю F5 на второй вкладке, и затем эффект работает отлично.

Эффект отлично работает на второй вкладке после нажатия F5

Это код моего проекта

1. app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    import { RouterModule } from '@angular/router';
    import { ReactiveFormsModule } from '@angular/forms';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatButtonModule } from '@angular/material/button';
    import { MatMenuModule } from '@angular/material/menu';
    import { MatIconModule } from '@angular/material/icon';


    import { DxDataGridModule } from 'devextreme-angular';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

    import { AppComponent } from './app.component';
    import { NavMenuComponent } from './nav-menu/nav-menu.component';
    import { HomeComponent } from './home/home.component';
    import { CounterComponent } from './counter/counter.component';
    import { FetchDataComponent } from './fetch-data/fetch-data.component';
    import { LoginComponent } from './login/login.component';
    import { HistoricoVisitasComponent } from './historico-visitas/historico-visitas.component';
    import { SemaforoComponent } from './semaforo/semaforo.component';
    import { MaterialComponent } from './material/material.component';

    import { UserService } from './_services/user.service';
    import { MenuService } from './_services/menu.service';
    import { SessionStorageService } from './_services/session-storage.service';


    @NgModule({
      declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        CounterComponent,
        FetchDataComponent,
        LoginComponent,
        HistoricoVisitasComponent,
        SemaforoComponent,
        MaterialComponent
      ],
      imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        FormsModule,
        DxDataGridModule,
        NgbModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        RouterModule.forRoot([
          { path: '', component: HomeComponent, pathMatch: 'full' },
          { path: 'counter', component: CounterComponent },
          { path: 'fetch-data', component: FetchDataComponent },
          { path: 'login', component: LoginComponent },
          { path: 'historico', component: HistoricoVisitasComponent },
          { path: 'semaforo', component: SemaforoComponent },
          { path: 'material', component: MaterialComponent }
        ])
      ],
      providers: [UserService, MenuService, SessionStorageService]
      ,
      bootstrap: [AppComponent]
    })
    export class AppModule {} 

Код html меню, которое видно на изображениях, которые я прикрепил.

<header>
  <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-light border-bottom box-shadow mb-2">
    <div class="navbar-collapse collapse d-flex flex-row"
         [ngClass]="{ show: isExpanded }">
      <ul class="navbar-nav flex-grow">
        <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-center" [routerLink]="['/semaforo']">
            <i class="material-icons md-45 primary">traffic</i>Semáforo
          </a>
        </li>
        <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-center" [routerLink]="['/fetch-data']"><i class="material-icons md-45 primary">book</i>Agenda</a>
        </li>
        <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-center" [routerLink]="['/login']"><i class="material-icons md-45 primary">input</i>Login</a>
        </li>
        <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-center" [routerLink]="['/historico']"><i class="material-icons md-45 primary">enhanced_encryption</i>Historial</a>
        </li>
        <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-center" [routerLink]="['/material']"><i class="material-icons md-45 primary">scatter_plot</i>Material</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

Кто-нибудь знает, что может происходить? Заранее большое спасибо.