Angular CSS проблем, я не могу применить свои материальные темы; все материальные предметы без стиля, я уверен, что я делаю что-то не так

Question

, как гласит заголовок, я новичок в angular, и я только что создал свою первую страницу с таблицей материалов, которая загружает данные из веб-API, проблема, с которой я сталкиваюсь, заключается в том, что я не могу настроить страницу с материальными темами, например, когда я помещаю кнопку материала; это просто без стиля; простой html глядя. Я уверен, что делаю что-то очень не так, но не знаю, что именно. Мой модуль приложения:

    import { BrowserModule } from '@angular/platform-browser';  
    import { NgModule } from '@angular/core';  
      
    import { AppComponent } from './app.component';  
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
    import { HttpClientModule }    from '@angular/common/http';  
   import { ServiceService } from './service.service';
   import { MatTableModule } from '@angular/material/table';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatPaginator } from '@angular/material/paginator';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';


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

import { MatSortModule } from '@angular/material/sort'; 
import { MatPaginatorModule } from '@angular/material/paginator'; 
    @NgModule({  
      declarations: [  
        AppComponent  
      ],  
      imports: [  
        BrowserModule,  
        FormsModule,  
        ReactiveFormsModule,  
        HttpClientModule,
        MatTableModule,
        BrowserAnimationsModule,
        MatFormFieldModule,
        MatInputModule,
        MatPaginatorModule,
        MatSortModule,
        MatButtonModule


      
      ],  
      providers: [ServiceService], 
      bootstrap: [AppComponent]  
    })  
    export class AppModule { }  

my app.component. html:

Таблица сотрудников CRUD Операция

Имя Имя является обязательным полем Адрес Адрес является обязательным полем Электронная почта Электронная почта обязательное поле Возраст Возраст является обязательным {{EventValue}}

      <mat-form-field>
          <mat-label>Filter</mat-label>
          <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
      </mat-form-field>

      <div class="mat-elevation-z8">
          <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

              <!-- ID Column -->
              <ng-container matColumnDef="eId">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.eId}} </mat-cell>
              </ng-container>

              <!-- Name Column -->
              <ng-container matColumnDef="eName">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.eName}} </mat-cell>
              </ng-container>

              <!-- Address Column -->
              <ng-container matColumnDef="eAddress">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.eAddress}} </mat-cell>
              </ng-container>

              <!-- Age Column -->
              <ng-container matColumnDef="eAge">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Age </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element.eAge}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="editAction">
                  <mat-header-cell *matHeaderCellDef> editAction </mat-header-cell>
                  <mat-cell *matCellDef="let element"><i class="material-icons" (click)="EditData(element)">Edit</i>  </mat-cell>
              </ng-container>

              <ng-container matColumnDef="deleteAction">
                  <mat-header-cell *matHeaderCellDef> deleteAction </mat-header-cell>
                  <mat-cell *matCellDef="let element"> <button mat-fab color="primary" (click)="deleteData(element)">Delete</button>  </mat-cell>
              </ng-container>
           
              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


          </table>
          <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
      </div>

Я поместил в свой angular. json

 "styles": [
          {
            "input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
          }

Однако моя страница не применяет CSS; Я пробовал добавить его в заголовок в html, но безрезультатно :( Есть идеи?