mat-form-field matInput default styling not applied in AngularJs/Angular hybrid

Question

I've got an AngularJs / Angular 12.0.5 hybrid application that I'm in the middle of moving up to Angular proper.

When using an input with the matInput attribute in a mat-form-field, it appears to only display the placeholder / label values without any other styling applied. See image for example:

Not sure what would cause this as the angular material module has been imported correctly and displays these fields with no console errors. Below is my code:

App Module

import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {HttpClientModule} from "@angular/common/http";
import moduleName from "./angularJS.module";
import {UIRouterUpgradeModule} from "@uirouter/angular-hybrid";
import {NgModule} from "@angular/core";
import {UserProfileModule} from "./app/modules/user/user-profile.module";

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        UpgradeModule,
        UserProfileModule,
        UIRouterUpgradeModule.forRoot()
    ]
})

export class AppModule {
    constructor(private upgrade: UpgradeModule) {
        console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
        upgrade.bootstrap(document.body, [moduleName], {strictDi: true});
    }

    ngDoBootstrap() {
    }
}

Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        BrowserAnimationsModule,
        FlexLayoutModule,
        FormsModule,
        MatToolbarModule,
        MatFormFieldModule,
        MatInputModule,
        MatSelectModule,
        MatButtonModule,
        MatTableModule,
        MatSlideToggleModule,
        ReactiveFormsModule
    ]
})
export class SharedModule { }

User Profile Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserProfileComponent } from './user-profile.component';

import { SharedModule } from "../../shared/shared.module";

@NgModule({
    declarations: [
        UserProfileComponent
    ],
    imports: [
        CommonModule,
        SharedModule
    ],
    exports: [
        UserProfileComponent
    ],
    entryComponents: [
        UserProfileComponent
    ]
})
export class UserProfileModule { }

User Profile Component

import {Component} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
import angular from "angular";

@Component({
    selector: "user-profile",
    template: require("./user-profile.html")
})
export class UserProfileComponent {
    constructor() { }
}

angular
    .module('app')
    .directive("userProfile", downgradeComponent({
        component: UserProfileComponent
    }) as angular.IDirectiveFactory);

User Profile HTML

<div fxFill fxLayout="column" [class.mat-elevation-z1]="true">
    <mat-toolbar>
        <div class="profile-header">
            <h4>User Profile</h4>
        </div>
    </mat-toolbar>
    <form fxLayout="column">
        <mat-form-field>
            <input matInput placeholder="First Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Last Name">
        </mat-form-field>
        <mat-form-field appearance="legacy">
            <mat-label>Standard form field</mat-label>
            <input matInput placeholder="Placeholder">
            <mat-hint>Hint</mat-hint>
        </mat-form-field>
    </form>
</div>

Answer 1

I fixed this issue by doing the following

1. Open angular.json
2. Navigate to projects > <your project> > architect > build > options > styles
3. Added the style from the angular package to get the following styles block

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
],

4. Repeat the steps above under projects > <your project> > architect > test > options > styles
5. Restart the Angular CLI Server (ng serve command)

Answer 2

So turns out I was missing the default theming required for Angular to style its elements.

I added a material-theme.scss file in my root and linked it in main.ts which immediately fixed the issue.

MATERIAL THEME SCSS

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

MAIN TS

import './material-theme.scss'