Angular material datepicker refuses to work

Question

I've been trying to get it to work for almost a hour, and i've gotten nowhere, everything else works fine but i just get a white screen from this. I looked both through StackOverflow and Github but i can't find a fix.

here is the code from event-log.component.html

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

and the code from event-log.component.ts

import { Component } from '@angular/core';

    @Component({
      selector: 'event-log',
      templateUrl: './event-log.component.html',
      styleUrls: ['./event-log.component.css']
    })
    export class EventLogComponent {
    
    }

"@angular/material": "^9.2.4" is the angular material version i'm using (taken from package.json)

My complete app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import {MatExpansionModule} from '@angular/material/expansion'
import { FupAdmAccordionComponent } from './fup-adm-accordion/fup-adm-accordion.component';
import {MatCardModule} from '@angular/material/card';
import { AdmAccordionComponent } from './adm-accordion/adm-accordion.component';
import { OwnerAccordionComponent } from './owner-accordion/owner-accordion.component';
import { HomeScreenComponent } from './home-screen/home-screen.component';
import {MatPaginatorModule} from '@angular/material/paginator';
import { AppRoutingModule } from './app-routing.module';
import { MyProfileComponent } from './my-profile/my-profile.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import { AboutComponent } from './about/about.component';
import { CheckoutPanelComponent } from './checkout-panel/checkout-panel.component';
import { ComparerComponent } from './comparer/comparer.component';
import { ControllUsersComponent } from './controll-users/controll-users.component';
import { MachinesComponent } from './machines/machines.component';
import { SearchPanelComponent } from './search-panel/search-panel.component';
import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {MatSelectModule} from '@angular/material/select';
import { FupAdmHistoryComponent } from './fup-adm-history/fup-adm-history.component';
import {MatSortModule} from '@angular/material/sort';
import { AdminRelatedDrawingsComponent } from './admin-related-drawings/admin-related-drawings.component';
import {PortalModule} from '@angular/cdk/portal';
import {MatCheckboxModule} from '@angular/material/checkbox';
import { OwnerManageUsersComponent } from './owner-manage-users/owner-manage-users.component';
import { LogAccordionComponent } from './log-accordion/log-accordion.component';
import { AdminDeleteFromBaseComponent } from './admin-delete-from-base/admin-delete-from-base.component';
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
import {MatDialogModule} from '@angular/material/dialog';
import { FupRangeComponent } from './fup-range/fup-range.component';
import { FupLibComponent } from './fup-lib/fup-lib.component';
import { EventLogComponent } from './event-log/event-log.component';
import { SystemLogComponent } from './system-log/system-log.component';
import {MatDatepickerModule} from '@angular/material/datepicker';


@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    FupAdmAccordionComponent,
    AdmAccordionComponent,
    OwnerAccordionComponent,
    HomeScreenComponent,
    MyProfileComponent,
    AboutComponent,
    CheckoutPanelComponent,
    ComparerComponent,
    ControllUsersComponent,
    MachinesComponent,
    SearchPanelComponent,
    FupAdmHistoryComponent,
    AdminRelatedDrawingsComponent,
    OwnerManageUsersComponent,
    LogAccordionComponent,
    AdminDeleteFromBaseComponent,
    DialogBoxComponent,
    FupRangeComponent,
    FupLibComponent,
    EventLogComponent,
    SystemLogComponent,
    
  ],
  imports: [
    MatCardModule,
    MatExpansionModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    LayoutModule,
    FormsModule,
    MatDialogModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatPaginatorModule,
    AppRoutingModule,
    MatInputModule,
    MatTableModule,
    MatSelectModule,
    MatSortModule,
    PortalModule,
    MatCheckboxModule,
    MatDatepickerModule,
    

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

First answer

I think one issue is because you forget to include the following Angular Module:

• CommonModule

Also, the other of the modules is really important, because you cannot import Module B before Module A if Module B uses Module A.

Finally, the AppRoutingModule should be the last thing to import.

Answer after see the code in https://stackblitz.com/edit/angular-ivy-ntmcpq

It seems to be that one import was missing:

You can fix this issue importing:

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

In resume

You app.module.ts should be:

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    FupAdmAccordionComponent,
    AdmAccordionComponent,
    OwnerAccordionComponent,
    HomeScreenComponent,
    MyProfileComponent,
    AboutComponent,
    CheckoutPanelComponent,
    ComparerComponent,
    ControllUsersComponent,
    MachinesComponent,
    SearchPanelComponent,
    FupAdmHistoryComponent,
    AdminRelatedDrawingsComponent,
    OwnerManageUsersComponent,
    LogAccordionComponent,
    AdminDeleteFromBaseComponent,
    DialogBoxComponent,
    FupRangeComponent,
    FupLibComponent,
    EventLogComponent,
    SystemLogComponent,
    
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatNativeDateModule
    MatCardModule,
    MatExpansionModule,
    MatFormFieldModule,
    LayoutModule,
    MatDialogModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatPaginatorModule,
    MatInputModule,
    MatTableModule,
    MatSelectModule,
    MatSortModule,
    PortalModule,
    MatCheckboxModule,
    MatDatepickerModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let me know if now it works.