Анимация вкладки углового материала не работает

Question

У меня есть угловые навигационные вкладки, как в примере ниже.Сама вкладка работает нормально и навигация тоже работает.Моя проблема в том, что анимация не работает.Когда я нажимаю на вкладку, вместо анимации я получаю вкладку тройного размера на пару секунд.У меня есть BrowserAnimationsModule и MatTabsModule в моем импорте в app.module.ts.В чем может быть проблема?Как исправить анимацию?

<nav mat-tab-nav-bar>
  <a mat-tab-link [routerLink]="'/'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
    Home
  </a>
  <a mat-tab-link [routerLink]="'/projects'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
    Projects
  </a>
  <a mat-tab-link [routerLink]="'/about'" routerLinkActive #rla="routerLinkActive"   [active]="rla.isActive">
    About
  </a>
</nav>

Любые предложения, советы и ссылки высоко ценятся.

Редактировать:

Мои зависимости:

"@angular/animations": "^6.1.0",
"@angular/cdk": "6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",

Answer 1

Анимация не работает, потому что я забыл добавить в styles.css тему по умолчанию.Без этого все работало, кроме анимации.Так что просто добавьте к своим стилям

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Если вы столкнулись с подобными проблемами, просто прочитайте руководство дважды при добавлении материала в ваш проект, вы можете что-то пропустить.https://material.angular.io/guide/getting-started