mat-datepicker makes the app crash without logged error

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.

Answer 2

In case somebody still encounters this problem, even after the solution of Nino Filiu, try to add the MatDatePickerModule dependency in the app.module.ts.

I had a lazy loaded module, containing mat-dialogs where the mat-datepicker was used. I initially had my mat dependencies within the lazy loaded module. Only after moving MatDatePickerModule to the app.module.ts, the view (dialog) stopped crashing.