My goal is to implement a login page within my Angular application.

Here's the code I've written:

<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> 

You can see how it looks here.

The background color is due to the provided CSS styling.

The Mat card component is not displaying correctly, and the layout orientation is also off. I have made sure to import all necessary dependencies.

In my app.module.ts file, I have included:

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";

I had success using this same code in a previous project, but for some reason, it's not working as expected now. Any assistance would be greatly appreciated.

As suggested in the comments, here is the angular.json file:

{
  "$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"
}