#

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

 

Problem:

Beim Erstellen einer Sidenav in Angular wird die Fehlermeldung im Compiler gegeben:

 

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.

 

 

 

Lösung:

Einfügen von MatListModule in Angular app.module.ts

 

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

 

Und in @NgModule imports

 

  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.

 

In Visual Code

Solved in app.module.ts

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 { MatSidenavModulefrom '@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 { }

 

 

 

Angular Code in sidenav.component.ts

import { ComponentOnInitOutput,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();

  }

 

}

 

 

 

 

Angular Code in sidenav.component.html

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

 

 

Mobile

.

0123movie.net