Angular Material Sidenav Module is not recognised

Question

I'm using Angular 9.1.11 as well as Angular Material 9.2.4 . I have this problem when I try to import the MaterialSidenavModule so i can use components such as mat-sidenav-container etc.

Here is my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import { SidemenuComponent } from './sidemenu/sidemenu.component';
import { MatSidenavModule } from '@angular/material/sidenav';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidemenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatSidenavModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The problem is that my IDE (WebStorm) tells me that MatSidenavModule is not an Angular module and won't import it. My sidenav component also has errors that all the material sidenav components i wanted to use are not valid html tags...

Component's HTML template:

<mat-sidenav-container class="sidemenu-container">
  <mat-sidenav mode="side" [(opened)]="opened">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>

    <p>Dummy text</p>

  </mat-sidenav-content>

</mat-sidenav-container>

All my other imports work perfectly fine but this one just won't stop ruining my app. Where did i make a mistake?

Angular itself also won't compile my code. As i said all the material-sidenav components are not imported for some reason, also as i just noticed, some other material modules experience the same "not an Angular module" problem, but a couple of them work perfectly fine (icon module and button module). So it is not an IDE problem as far as i understand — Roman Blahuta

Roman Blahuta Roman Blahuta · Accepted Answer · 2020-07-03T17:13:16

Soooo, I just solved my problem.

Apparently Angular Material 9+ won't work if Ivy(Angular's new compilation and rendering pipeline since version 9) is disabled in your project (oops I guess).

I updated the Material package once more from version 9 to 10, re-enabled Ivy and the app seems to be working perfectly fine after that.

Angular Material Sidenav Module is not recognised

1 Answers