Uncaught Error: Unexpected directive 'angular-material' imported by the module 'MyMaterialModule'. Please add a @NgModule annotation. angular 5

user_9003070 0
Viewed 11221

I keep have this error

Uncaught Error: Unexpected directive 'MatPaginator' imported by the module 'MaterialModule'. Please add a @NgModule annotation.

this is my material module 

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 { }

and this is my app.module

...
import { MaterialModule } from './material.module';


@NgModule({
  declarations: [
     ...

  ],
  imports: [
    ...
    MaterialModule,
    ...
  ],
  providers: [...],
  bootstrap: [ AppComponent]
})
export class AppModule { }

and also this is my view 

<div class="example-container mat-elevation-z8">
   <div class="example-header">
     <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" 
    placeholder="Filter">
    </mat-form-field>
  </div>


<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
</ng-container>

<!-- Color Column -->
<ng-container matColumnDef="phone">
  <mat-header-cell *matHeaderCellDef> phone </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
</ng-container>

<ng-container matColumnDef="company">
  <mat-header-cell *matHeaderCellDef> company </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

i took it from angular material documentation how can i fix it ?

angular typescript
4 Answers

You are importing MatPaginator module, insted of importing MatPaginator please import MatPaginatorModule module. Have the same issue this one work for me.

Like: 

// material.module.ts

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
    imports: [
        MatTableModule,
        MatPaginatorModule
    ],
    exports: [
        MatTableModule,
        MatPaginatorModule
    ]
})

export class MaterialModule { }
user_42270320

You should import MatPaginator Module but you're importing MatPaginator, change it in your MaterialModule and you're done.

Saludos.

user_101151770

const MaterialModules = [ MatButtonModule, MatToolbarModule, MatIconModule, MatDialogModule, MatCardModule, MatPaginatorModule ]

These are the modules, I have impoted and exported modules from material but not individual components or buttons etc.. (most generalized)

I beleive MatPaginatorModule is the one which you need to import and it will provide all required directives or components for your case

user_50821630
Related