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 { 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 { }
|
Angular Code in sidenav.component.ts
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(); }
}
|
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>
|