角材料侧面

Question

I am following the material.angular.io documentation.
While building a side navbar i am getting the below error " 'mat-nav-list' is not a known element: "

I have imported the following

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

I tried other components by importing the APIs and all work fine except the sidenav

I really cannot figure out what went wrong. Any suggestions will be great hep. Thanks in advance.

Answer 1

Importing it is not enough, you also need to add it to the same module that your component is defined in.

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    MatSidenavModule
  ]
})
export class MyModule { }

Answer 2

I'm pretty sure that you are also not importing MatListModule from @angular/material/list in your app's module (or create a module dedicated for Material components):

material.module.ts :

import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';

@NgModule({
  exports: [
    MatSidenavModule,
    MatListModule
  ],
  imports: [
    MatSidenavModule,
    MatListModule
  ]
})
export class MaterialModule { }

app.module.ts :

import { NgModule } from '@angular/core';
import { MaterialModule } from './material.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ]
})
export class AppModule { }