Angular Material日期选择器异常：无法输入、图标缺失及无年月切换栏

我在Angular组件的HTML中编写了日期选择器代码，未添加自定义CSS，但出现以下问题：

• 输入框无法输入、无光标，日历图标不显示
• 点击图标预期位置能弹出日历，但日历没有切换年月的标题栏

这段代码在StackBlitz中可正常运行，推测是本地Angular项目的配置问题。我已导入FormsModule、MatDatepickerModule、MatFormFieldModule、MatInputModule、MatNativeDateModule、MatRippleModule、MatIconModule，package.json中@angular/material版本为^13.3.9。

我尝试过以下Stack Overflow的解决方案，但均未解决问题：

• Angular Material Date-Picker is not working properly
• Angular matdatepicker is not displaying like it should
• Angular Material Datepicker won't show in the page
• Angular Material Datetime Picker not showing icons

附相关截图，求进一步排查思路。

相关代码 #

<!DOCTYPE html>
<html>
<div *ngIf="isSignedIn">

    <mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker" style="background:blue"></mat-datepicker-toggle>
        <mat-datepicker #picker color="primary"></mat-datepicker>
      </mat-form-field>
       

</div>
</html>

<div *ngIf="!isSignedIn">
    <app-login></app-login>
</div>

内容的提问来源于stack exchange，提问作者rawmud