Weird behavior with Angular Material datepicker

Question

Problem Statement

I have implemented the Angular Material date picker but it doesn't allow for me to view it when I navigate to the page with it in there. Instead, it just redirects me back to the home page for some extremely strange reason even though this has nothing to do with routing!

---

Code

This is the code that redirects me to the home page whenever I try to view it. This does not work, even though it compiles:

 <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>

This is the code that works (the same input field but without the date picker):

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

---

Explanation of Code

The first block of code blocks my access to view it. Whenever I use that piece of code and try to navigate to the page containing that code, it just redirects me back to the home page. Weird!

The second block of code works perfectly and is the same code, but it excludes the date picker. Nothing more to it.

---

Expected Results

I want to use the Angular Material datepicker for the date of birth field in the form.

---

Actual Results

The datepicker (for some reason) redirects me to the home page whenever I route to the page containing the datepicker code.

---

Addtional Information

My routing module

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 { }

---

Imports

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 { }

---

The component where I am navigating to the page with the datepicker.

<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

After looking in my console, I found that there is an error message saying: ERROR Error: MatDatepicker: No provider found for DateAdapter. Then, after some research on Google, I found that you have to import the following:

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

...

imports: [
    ...
    MatDatepickerModule,
    MatNativeDateModule
  ],

And place MatDatepickerModule in providers:

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

This fixed my issue. I was stuck on this problem for 3 days because I didn't look in my console for an error. Now I know to look at my console whenever I have difficulties. Need to get in the habit of looking in my console...

Have a good day everyone!