Error: error NG8001: mat-nav-list is not a known element:

Error:  NG8001: 'mat-nav-list' is not a known element:

1. If 'mat-nav-list' is an Angular component, then verify that it is part of this module.

import { MatListModule } from '@angular/material/list'

  imports: [

..

    MatSidenavModule,

    MatListModule

  ],

Error: src/app/components/sidenav/sidenav.component.html:5:9 - error NG8001: 'mat-nav-list' is not a known element:

1. If 'mat-nav-list' is an Angular component, then verify that it is part of this module.

2. If 'mat-nav-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5         <mat-nav-list>

          ~~~~~~~~~~~~~~

  src/app/components/sidenav/sidenav.component.ts:6:16

    6   templateUrl: './sidenav.component.html',

                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

    Error occurs in the template of component SidenavComponent.

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSidenavModule} from '@angular/material/sidenav';

import { MatListModule } from '@angular/material/list'

import { SidenavComponent } from './components/sidenav/sidenav.component';

import { PageComponent } from './components/page/page.component';

import { EditpageComponent } from './components/editpage/editpage.component';

import { LoginComponent } from './components/login/login.component';

@NgModule({

  declarations: [

    AppComponent,

    SidenavComponent,

    PageComponent,

    EditpageComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    MatSidenavModule,

    MatListModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

import { Component, OnInit, Output,EventEmitter } from '@angular/core';

@Component({

  selector: 'app-sidenav',

  templateUrl: './sidenav.component.html',

  styleUrls: ['./sidenav.component.css']

})

export class SidenavComponent implements OnInit {

  @Output() sidenavClose = new EventEmitter();

  constructor() { }

  ngOnInit(): void {

  }

  public onSidenavClose = () => {

    this.sidenavClose.emit();

  }

}

<p>sidenav works!</p>

<mat-sidenav-container>

<mat-sidenav #sidenav role="navigation">

        <mat-nav-list>

            <a mat-list-item > Accounts </a>

            <a mat-list-item > Create Account </a>

            <a mat-list-item > Contacts </a>

            <a mat-list-item > Create Contact </a>

            <a mat-list-item > Activities </a>

            <a mat-list-item > Create Activity </a>

            <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

          </mat-nav-list>

</mat-sidenav>

<mat-sidenav-content>

    <div style="height: 88vh;">

    </div>

  </mat-sidenav-content>

</mat-sidenav-container>