Angular Material MatDatePicker报Cannot read properties of undefined无法打开

1. 核心错误：日期选择器组件标签拼写错误 #

你的HTML模板里把mat-datepicker错写成了mat-date-picker，多了一个不必要的中横线，导致Angular无法识别为官方Material日期选择器组件，组件本身不存在内置的open方法，因此触发报错。
修复方法：把模板里的对应代码段

<mat-date-picker #picker></mat-date-picker>

修改为

<mat-datepicker #picker></mat-datepicker>

2. 额外配置修正：AppModule配置调整 #

你当前在providers数组里错误引入了模块类MatDatepickerModule和MatNativeDateModule，模块类仅需要放在imports数组中即可，无需加入providers配置项。如果需要全局配置日期选择器的相关规则，可以按需添加DateAdapter相关配置，不要直接把模块类放入providers。
修正后的AppModule参考配置：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    FlexLayoutModule,
    MatDatepickerModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatNativeDateModule,
  ],
  // 移除原providers中的两个模块，可根据业务需要添加其他服务配置
  providers: [],
  bootstrap: [AppComponent],
})

修改完以上两处后重新编译项目，即可正常打开使用日期选择器。

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