CODEWITHSUNDEEP
angulartypescriptangular-materialangular9mat-sidenav
Roman Blahuta
Roman Blahuta

Reputation: 29

Angular Material Sidenav Module is not recognised

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?

Upvotes: 0

Views: 2203

Answers (1)

Roman Blahuta
Roman Blahuta

Reputation: 29

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.

Upvotes: 0

Related Questions