Currently, I am utilizing Angular version 9.1.11 in conjunction with Angular Material version 9.2.4. The issue arises when attempting to import the MaterialSidenavModule, which is required for utilizing components like mat-sidenav-container.
Below is a snippet from 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 issue at hand is that my IDE (WebStorm) is indicating that MatSidenavModule is not recognized as an Angular module and therefore cannot be imported. This leads to errors within my sidenav component as the material sidenav components are flagged as invalid HTML tags...
Here's a glimpse at the 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 other imports work flawlessly except for this particular one that seems to be causing havoc on my application. Where could I have potentially gone wrong?