Uncaught Error: Unexpected directive 'angular-material' imported by the module 'MyMaterialModule'. Please add a @NgModule annotation. angular 5
10,937
Solution 1
I had the same problem. I imported the MatPaginatorModule
inside my @NgModule
into the imports array.
It solved my problem. I hope it works for you too.
Solution 2
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 { }
Solution 3
You should import MatPaginator Module but you're importing MatPaginator, change it in your MaterialModule and you're done.
Saludos.
Related videos on Youtube
Author by
Arza Zahrian
Updated on September 14, 2022Comments
-
Arza Zahrian over 1 year
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 ?