ERROR! Cannot read property 'viewContainer' of undefined

Question

I am currently using angular 10 and I want to do routing to two different views, and this error comes up. What I want to achieve is whenever I click a specific button, it will show the view. I made two different components to the views.

core.js:4196 ERROR TypeError: Cannot read property 'viewContainer' of undefined
    at MatTable._forceRenderHeaderRows (table.js:1637)
    at MatTable.ngAfterContentChecked (table.js:1228)
    at callHook (core.js:3041)
    at callHooks (core.js:3007)
    at executeInitAndCheckHooks (core.js:2959)
    at refreshView (core.js:7356)
    at refreshComponent (core.js:8453)
    at refreshChildComponents (core.js:7108)
    at refreshView (core.js:7365)
    at refreshComponent (core.js:8453)

These are the dependencies :

{
  "name": "app-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/free-regular-svg-icons": "^5.14.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "ngx-pagination": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3",
    "@angular/cdk": "^6.2.0",
    "@angular/material": "^6.2.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgxPaginationModule } from 'ngx-pagination';
import { DataTableComponent } from './data-table/data-table.component';
import { MatTableModule, MatPaginatorModule, MatSortModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent,
    routingComponents,
    DataTableComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule,
    NgxPaginationModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RekeningComponent } from './rekening/rekening.component';
import { IdentitasComponent } from './identitas/identitas.component';

const routes: Routes = [
  { path:'rekening', component: RekeningComponent },
  { path:'identitas', component: IdentitasComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [RekeningComponent, IdentitasComponent]

please help, I have no idea what to do.

EDITED v2 HTML for table

<table mat-table matSort class="table-bordered" style="margin-left: 120px;">
        <tr class="bg-primary">
            <th mat-sort-header="iname" class="text-white p-3 pl-3 pr-3">Name</th>

            <th mat-sort-header="itype" class="text-white p-3 pl-3 pr-3">Document Type</th>

            <th mat-sort-header="idate" class="text-white p-3 pl-3 pr-3">Document Date</th>

            <th mat-sort-header="ver" class="text-white p-3 pl-3 pr-3">Version</th>

            <th mat-sort-header="idesc" class="text-white p-3 pl-3 pr-3">Document Description</th>

            <th mat-sort-header="istatus" class="text-white p-3 pl-3 pr-3">Status</th>
        </tr>
        <tr *ngFor = "let data of sortedrdoc">
            <td class="p-2 pl-2 pr-2">{{ data.name }}</td>
            <td class="p-2 pl-2 pr-2">{{ data.type }}</td>
            <td class="p-2 pl-2 pr-2">{{ data.date }}</td>
            <td class="p-2 pl-2 pr-2">{{ data.version }}</td>
            <td class="p-2 pl-2 pr-2">{{ data.description }}</td>
            <td class="p-2 pl-2 pr-2">{{ data.status }}</td>
        </tr>
    </table>

this is the code I am using for my table. before, I used mat cell but the error was the same. the error will vanished if I don't use mat-table.

Answer 1

The fact is that you are using the new version of Angular and the old version Angular material.

Your versions:

Angular: "~10.0.5",
Angulae material: "^6.2.0"

Update Angular Material and you will not see this error.

To update Angular material:

npm remove @angular/material @angular/cdk
npm add @angular/material @angular/cdk