title: how exactly should i import MatDrawer and MatDrawerContainer in app.module.ts? angular 9
body: <p>I was trying to use angular material to open a side nav when I click on the toolbar icon. Everything works fine until I try to actually open the navbar, I got the error:</p>
  <blockquote>
  <p>Unexpected directive 'MatDrawer in @angular/material/sidenav/index.d.ts' imported by the module 'AppModule in /src/app/app.module.ts'. Please add a @NgModule annotation.</p>
  </blockquote>
  <p>Here are the npm modules (package.json):</p>
  <pre><code>&quot;@angular/animations&quot;: &quot;^9.1.11&quot;,
  &quot;@angular/cdk&quot;: &quot;^9.2.4&quot;,
  &quot;@angular/common&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/compiler&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/core&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/forms&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/material&quot;: &quot;^9.2.4&quot;,
  &quot;@angular/platform-browser&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/platform-browser-dynamic&quot;: &quot;~9.1.11&quot;,
  &quot;@angular/router&quot;: &quot;~9.1.11&quot;,
  &quot;jQuery&quot;: &quot;^1.7.4&quot;,
  &quot;jquery&quot;: &quot;^3.5.1&quot;,
  &quot;rxjs&quot;: &quot;~6.5.4&quot;,
  &quot;tslib&quot;: &quot;^1.10.0&quot;,
  &quot;zone.js&quot;: &quot;~0.10.2&quot;
  </code></pre>
  <p>here is my app.module:</p>
  <pre><code>import { MatDrawer } from '@angular/material/sidenav';
  import { MatDrawerContainer } from '@angular/material/sidenav';
  
  @NgModule({
    declarations: [
      AppComponent,
      DressesComponent,
      LoadingSpinnerComponent,
      Toolbar,
      ButtonToggle,
      Sidenav
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      BrowserAnimationsModule,
      MatTableModule,
      MatSelectModule,
      MatDialogModule,
      MatInputModule,
      MatToolbarModule,
      MatIconModule,
      MatButtonToggleModule,
      MatDrawer,
      MatDrawerContainer
    
    ],
    providers: [DressesService, SidenavService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>and app.component.html:</p>
  <pre><code>&lt;html dir=&quot;rtl&quot; lang=&quot;he&quot;&gt;
      &lt;toolbar&gt;&lt;/toolbar&gt;
      &lt;side-nav&gt;&lt;/side-nav&gt;
  &lt;/html&gt;
  </code></pre>