title: Uncaught Error: Unexpected directive 'angular-material' imported by the module 'MyMaterialModule'. Please add a @NgModule annotation. angular 5
body: <p>I keep have this error </p>
  
  <blockquote>
    <p>Uncaught Error: Unexpected directive 'MatPaginator' imported by the module 'MaterialModule'. Please add a @NgModule annotation.</p>
  </blockquote>
  
  <p>this is my material module </p>
  
  <pre><code>import { NgModule, ViewChild } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MatPaginator, MatSort, MatTableDataSource,MatButtonModule, 
  MatTableModule } from '@angular/material';
  
  @NgModule({
      imports: [MatButtonModule,MatTableModule,
                MatPaginator, MatSort, 
                MatTableDataSource],
      exports: [MatButtonModule,MatTableModule,MatPaginator, MatSort, 
               MatTableDataSource],
  })
  export class MaterialModule { }
  </code></pre>
  
  <p>and this is my app.module</p>
  
  <pre><code>...
  import { MaterialModule } from './material.module';
  
  
  @NgModule({
    declarations: [
       ...
  
    ],
    imports: [
      ...
      MaterialModule,
      ...
    ],
    providers: [...],
    bootstrap: [ AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and also this is my view </p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
     &lt;div class="example-header"&gt;
       &lt;mat-form-field&gt;
        &lt;input matInput (keyup)="applyFilter($event.target.value)" 
      placeholder="Filter"&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- Name Column --&gt;
  &lt;ng-container matColumnDef="name"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let user"&gt; {{user.name}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Weight Column --&gt;
  &lt;ng-container matColumnDef="email"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; email &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let user"&gt; {{user.email}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Color Column --&gt;
  &lt;ng-container matColumnDef="phone"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; phone &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let user"&gt; {{user.phone}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="company"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; company &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let user"&gt; {{user.company.name}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>i took it from <a href="https://material.angular.io/components/table/overview" rel="noreferrer">angular material documentation</a> how can i fix it ? </p>