mat-card not working in my angular application

Question

I am trying to create a login page in my angular application.

My code

<mat-card class="login">
    <mat-card-content>
              <div class="example-small-box mat-elevation-z4">
                  <form class="example-form">
                      <mat-form-field class="email example-full-width">
                        <input  matInput placeholder="Email or User name" [(ngModel)]="username" name="username" required >
                      </mat-form-field>
                    
                      <mat-form-field class="example-full-width">
                        <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
                      </mat-form-field>
                    </form>  
  
  
                    <button class="btn" mat-raised-button color="primary" (click)="login()" >Login</button>
                 </div>
           
    </mat-card-content>
  </mat-card> 

It looks like this.

background color is because of the css given.

Mat card is not showing up and spacial orientation is also not proper. I have imported all the requirements.

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AhuComponent } from './ahu/ahu.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import {MatCardModule} from '@angular/material/card';
import {MatTabsModule} from '@angular/material/tabs';
import {MatFormFieldModule} from '@angular/material/form-field';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatInputModule, MatButtonModule} from '@angular/material';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  declarations: [
    AppComponent,
    AhuComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    FlexLayoutModule,
    MatCardModule,
    MatTabsModule,
    MatFormFieldModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have used the same code earlier in a different project which worked perfectly fine. But this time it is not working. Can someone help me with it

Edit as per the comments, angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "BMS": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/BMS",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "BMS:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "BMS:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "BMS:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "BMS:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "BMS:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "BMS"
}

Answer 1

First, verify that your Angular version is in adequacy with Material version

If it's not the problem, you probably forgot the CSS, add import to your styles.css file.

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

Answer 2

You likely forgot to add the material styles to your angular application in your Angular.json file you should have something like this

      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          .
          .
          .
          "styles": [
            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
            "src/styles.scss"
          ],
          .
          .
          .
        },

or you can add it directly in your css/scss files as referenced in the get started documentation https://material.angular.io/guide/getting-started#step-4-include-a-theme