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