Странное поведение с Angular Material datepicker

Question

Постановка проблемы

Я реализовал Angular Выбор даты материала, но он не позволяет мне просматривать его, когда я перехожу на страницу с ним там. Вместо этого он просто перенаправляет меня на домашнюю страницу по какой-то чрезвычайно странной причине, хотя это не имеет ничего общего с маршрутизацией!

---

Код

Это код, который перенаправляет меня на домашнюю страницу всякий раз, когда я пытаюсь его просмотреть. Это не работает, даже если компилируется:

 <mat-form-field class="dobContain">
     <input matInput [matDatepicker]="datePicker" class="field" maxlength="30" type="text"
                        placeholder="Date of Birth">
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

Этот код работает (то же поле ввода, но без выбора даты):

<mat-form-field class="dobContain">
   <input matInput class="field" maxlength="30" type="text" placeholder="Date of Birth">
</mat-form-field>

---

Объяснение кода

Первый блок кода блокирует мне доступ к его просмотру. Всякий раз, когда я использую этот кусок кода и пытаюсь перейти на страницу, содержащую этот код, он просто перенаправляет меня обратно на домашнюю страницу. Странно!

Второй блок кода работает отлично и представляет собой тот же код, но исключает средство выбора даты. Ничего больше.

---

Ожидаемые результаты

Я хочу использовать Angular Выбор даты материала для поля даты рождения в форме.

---

Фактические результаты

Средство выбора даты (по некоторым причинам) перенаправляет меня на домашнюю страницу всякий раз, когда я направляюсь на страницу, содержащую код средства выбора даты.

---

Дополнительная информация

Мой модуль маршрутизации

const routes: Routes = [
  { path: "home", pathMatch: "full", component: HomeComponent },
  { path: "products", pathMatch: "full", component: ProductsComponent },
  { path: "productX", pathMatch: "full", component: ProductXComponent },
  { path: "account", pathMatch: "full", component: AccountComponent },
  { path: "login", pathMatch: "full", component: AccountLoginComponent },
  { path: "signUp", pathMatch: "full", component: AccountSignUpComponent }, // The component with the datepicker
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled' })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---

Импорт

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent, GoldenCircleComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ProductXComponent } from './productX/productX.component';
import { AccountComponent } from './account/account.component';
import { AccountLoginComponent } from './account-login/account-login.component';
import { AccountSignUpComponent } from './account-sign-up/account-sign-up.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsComponent,
    ProductXComponent,
    GoldenCircleComponent,
    AccountComponent,
    AccountLoginComponent,
    AccountSignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule,
    MatCardModule,
    MatStepperModule,
    MatInputModule,
    MatDatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent],

// Needed for mat dialog module
  exports: [
    GoldenCircleComponent
  ],

  entryComponents: [
    GoldenCircleComponent
  ]
})
export class AppModule { }

---

Компонент, по которому я перемещаюсь на страницу с помощью средства выбора даты.

<body>
    <h1 class="title">Account</h1>

    <button mat-raised-button id="login" class="accountBtns" routerLink="/login">Login</button>

    <!-- The button that takes me to the datepicker page -->
    <button mat-raised-button class="accountBtns" routerLink="/signUp">Sign Up</button>
</body>

Answer 1

Посмотрев в консоль, я обнаружил, что появляется сообщение об ошибке: ERROR Error: MatDatepicker: No provider found for DateAdapter. Затем, после некоторых исследований в Google, я обнаружил, что вам нужно импортировать следующее:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

...

imports: [
    ...
    MatDatepickerModule,
    MatNativeDateModule
  ],

И место MatDatepickerModule в поставщиках:

...
 providers: [
    MatDatepickerModule
  ],
...

Это исправило мою проблему. Я застрял на этой проблеме в течение 3 дней, потому что я не искал в своей консоли ошибки. Теперь я знаю, что нужно смотреть на свою консоль всякий раз, когда у меня возникают трудности. Нужно привыкнуть смотреть в мою консоль ...

Всем хорошего дня!