mat-datepicker makes the app crash without logged

Question

I've got this page component template at the url /demo

<mat-form-field>
  <input matInput placeholder="Choose a date">
</mat-form-field>

Which renders fine, but as soon as I rewrite this as

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

the app redirects to the url / and does not displays anything but blank space. Nothing is logged in the console.

The code is supposed to work because it's copied from Angular Material basic datepicker example. I've imported MatFormFieldModule, MatInputModule and MatDatepickerModule.

What is happening?

Answer 1

A solution is to additionally import the optional Material module MatNativeDateModule. No dependency is explicitly stated in Material's doc on mat-datepicker, but it seems to be required in some cases.

Thanks to @pengyy 's answer on this question that helped me get to this solution.