Template Parse Error: 'mat-sidenav-container' is not a known element

Question

I'm new to Angular/material2 and I'm unsure of what I'm missing from trying to follow the documentation on sidenav.

In my AppComponent, I would like to display a sidenav and I've implemented as follows:

app.component.tss

import {
    NgModule,
    Component
} from '@angular/core';
import {
    MatSidenavModule,
    MatSidenavContent,
    MatSidenav
} from '@angular/material';
import {
    BrowserAnimationsModule
} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MatSidenav
    ],
    exports: [
        BrowserAnimationsModule,
        MatSidenav
    ]
})
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<mat-sidenav-container>

</mat-sidenav-container>
<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <nav>
        <a routerLink="/clients">Clients</a>
    </nav>
    <router-outlet>

    </router-outlet>

</div>]

The error is:

Uncaught Error: Template parse errors:
'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

What am I missing in my code?

import `MatSidenavContent` module – Sachila Ranawaka Jan 08 '18 at 05:02 — Sachila Ranawaka, Jan 08 '18 at 05:02
@SachilaRanawaka, It didn't change anything. – Newtt Jan 08 '18 at 05:04 — Newtt, Jan 08 '18 at 05:04

score 21 · Accepted Answer · edited Sep 08 '18 at 01:14

The answer from Sajeetharan was not working with newer versions of angular material.

From here:

MaterialModule was deprecated in version 2.0.0-beta.3 and it was removed completely in version 2.0.0-beta.11...

So, to fix the issue :

On post 2.0.0-beta.3:

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

@NgModule({
  exports: [MatSidenavModule],
  imports: [
    MatSidenavModule
  ],
})

And in older versions:

@NgModule({
  imports: [
    MaterialModule
  ],
})

Sajeetharan · Answer 2 · 2020-06-08T16:27:26.017

11

You need to import import { MaterialModule } from './material.module'; in app.module.ts

imports: [    
    MaterialModule 
  ]

Since material module has been depreciated, With Angular latest version you need to use

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

edited Jun 08 '20 at 16:27

answered Jan 08 '18 at 05:10

Sajeetharan

216,225
63
350
396

Farrel · Answer 3 · 2020-05-04T15:18:46.430

11

Angular 9 implementation

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

imports: [MatSidenavModule]

edited May 04 '20 at 15:18

answered May 03 '20 at 21:57

Farrel

185
1
10

Template Parse Error: 'mat-sidenav-container' is not a known element

3 Answers3