Угловой ввод / кнопки не анимируются

Question

Я пытаюсь создать страницу входа, но угловые кнопки и входы не анимируются, как на https://material.angular.io/components/button/overview и https://material.angular.io/components/input/overview

Мой код находится на https://stackblitz.com/github/vibhorgoyal18/atest-blogи маршрут к странице входа в систему / login

Пожалуйста, помогите мне решить эту проблему.

Также, когда я нажимаю Sign up и возвращаюсь к логину, на секунду появляется полоса прокрутки.Пожалуйста, советуйте об этом тоже

login.html

     <div class="container align-content-center py-2">
      <div class="row">
        <div class="col-md-8 mx-auto">
          <mat-tab-group disableRipple>
            <mat-tab label="Login">
              <mat-card>
                <div class="row">
                  <div class="col-md-12 align-content-center py-3">
                    <mat-form-field>
                      <input matInput placeholder="username">
                    </mat-form-field>
                  </div>
                  <div class="col-md-12 align-content-center py-3">
                    <mat-form-field floatLabel="always">
                      <input matInput>
                    </mat-form-field>
                  </div>
                  <div class="col-md-12 align-content-center py-3">
                    <button mat-button>Login</button>
                  </div>
                </div>
              </mat-card>
            </mat-tab>
            <mat-tab label="Sign Up">
              <mat-card><div class="row">
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="username">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="email">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="password">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <button mat-button>Login</button>
                </div>
              </div></mat-card>
            </mat-tab>
          </mat-tab-group>
        </div>
      </div>
    </div>

и app.module.ts

import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';

    import {AppComponent} from './app.component';
    import {HeaderComponent} from './modules/main/header/header.component';
    import {LoginComponent} from './modules/login/login.component';
    import {AppRoutingModule} from './app-routing.module';
    import {
      MatButtonModule,
      MatCardModule,
      MatDialogModule,
      MatFormFieldModule, MatInputModule,
      MatTabsModule
    } from '@angular/material';
    import {HttpClientModule} from '@angular/common/http';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        LoginComponent,
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        MatDialogModule,
        MatTabsModule,
        BrowserAnimationsModule,
        MatCardModule,
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

Answer 1

Перейдите в styles.css и добавьте это в начало

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

Answer 2

Убедитесь, что вы импортируете matButtonModule:

import {MatButtonModule} from '@angular/material/button';