MatTableDataSource has not been processed in angular

Question

I'm new to angular material. When i tried to bind the tablesource to mat-table I'm getting the compile error as like below: "node_modules/@angular/material/table/table-data-source.d.ts:25:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/material/table) which declares MatTableDataSource has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy."

My code in component.html :

<mat-table [dataSource]="emplist">
  <ng-container matColumnDef="Emp_Id">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Emp_Id </mat-header-cell>
    <mat-cell *matCellDef="let data">  </mat-cell>
    </ng-container>
   
    <!-- For Title -->
    <ng-container matColumnDef="Emp_Name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Emp_Name </mat-header-cell>
    <mat-cell *matCellDef="let data">  </mat-cell>
    </ng-container>
   
    <!-- For Completion Status -->
    <ng-container matColumnDef="Emp_Gender">
    <mat-header-cell *matHeaderCellDef mat-sort-header>  Emp_Gender </mat-header-cell>
    <mat-cell *matCellDef="let data">  </mat-cell>
    </ng-container>
   
    <!-- For Completion Status -->
    
    <ng-container matColumnDef="action">
    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
    <mat-cell *matCellDef="let data">
    <button mat-button color="primary" (click)="EditEmployee(data.Emp_Id)">Edit</button>
    <button mat-button color="warn" (click)="DeleteEmployee(data.Emp_Id)">Delete</button>
    </mat-cell>
    </ng-container>
   
    <!-- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> -->
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
   </mat-table>

My service calling method in componet.ts

   GetEmployeesData(){
    this.serviceref.GetEmployees().subscribe(
      (res : any) =>
      {
        this.emplist =  res.data;
        console.log(this.emplist);
      },
      error =>{
        console.log(error);
        alert(error);
      }
      )}

Unable to find why the compiler is throwing the error.

Removing node_modules and running npm i again solved this for me. — Yair Cohen
I'm newbie, How to remove the node_modules ? Again how to generate ? Can you provide the CLI commands please. — Srikanth Reddy
remove node_modules folder, and run npm i from the root of the project. — Ashot Aleqsanyan

Jobelle Jobelle · Accepted Answer · 2020-08-02T08:47:14

Add below specific configuration in package.json and npm install.

{ "scripts": { "postinstall": "ngcc" } }

Reference: https://angular.io/guide/ivy#speeding-up-ngcc-compilation

MatTableDataSource has not been processed in angular

2 Answers