Angular 7 Can't bind to after using lazy loading

Question

I got error:

Can't bind to 'dataSource' since it isn't a known property of 'table'. ("][dataSource]="ordersList" matSort class="table table-bordered mat-elevation-z8 material-table">

and another subsequence errors like qouted above after i implement lazy loading:

This is my code: app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    AppRoutingModule,

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'orders', loadChildren: './orders/orders.module#OrdersModule' },
  { path: '', redirectTo: '/orders', pathMatch: 'full' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

orders-routing.modules.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';

const routes: Routes = [
  {
    path: '',
    component: OrdersListComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrdersRoutingModule { }

Orders.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';

@NgModule({
  declarations: [OrdersListComponent],
  imports: [
    CommonModule,
    OrdersRoutingModule
  ]
})
export class OrdersModule { }

orders-list.component.ts

import { GetAllOrdersService } from './../../Services/JobOrder/get-all-orders.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatTableDataSource, MatSort } from '@angular/material';

@Component({
  selector: 'app-orders-list',
  templateUrl: './orders-list.component.html',
  styleUrls: ['./orders-list.component.css']
})
export class OrdersListComponent implements OnInit {
  ordersList: MatTableDataSource<any>;
  displayColumns: string[] = ['id', 'jobOrderStats', 'customerNameTxt', 'untMdlTxt', 'mobileTxt', 'wrty', 'wrtyDate', 'workshopName', 'createDate', 'actions'];
  @ViewChild(MatSort) sort: MatSort;
  constructor(private _getAllOrdersService: GetAllOrdersService, private _toastr: ToastrService) { }

  ngOnInit() {
    this._getAllOrdersService.GetAllOrders().subscribe(r => {
      if (r["code"] === "200") {
        this.ordersList = r["result"];
        this.ordersList.sort = this.sort;
      }
      else {
        this._toastr.error("Error occurred " + r["result"]);
      }
    });
  }

}

The error i got in the console:

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'table'. ("][dataSource]="ordersList" matSort class="table table-bordered mat-elevation-z8 material-table">

An update to the question !!

When i got an error says:

The pipe 'dateFormat' could not be found

I have declared a shared module:

import { DateFormatPipe } from './../../Pipes/date-format.pipe';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedRoutingModule } from './shared-routing.module';
import { ModuleWithProviders } from '@angular/compiler/src/core';

@NgModule({
  imports: [
    CommonModule,
    SharedRoutingModule,
  ],
  declarations: [DateFormatPipe],

  exports: [DateFormatPipe]
})
export class SharedModule {

}

and then i add it to the imports of orders module:

import { SharedModule } from './../Modules/shared/shared.module';
import { DateFormatPipe } from './../Pipes/date-format.pipe';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';
import { QuillModule } from 'ngx-quill';
import { MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatDialogModule, MatFormFieldModule, MatCheckboxModule } from '@angular/material';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OrdersListComponent],
  imports: [
    CommonModule,
    OrdersRoutingModule,
    QuillModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule,
    MatDialogModule,
    MatFormFieldModule,
    MatCheckboxModule,
    NgbModule,
    SharedModule
  ],
  exports: []
})
export class OrdersModule { }

score 3 · Accepted Answer · answered May 28 '19 at 11:36

3

Since you are using Material Table, You should import MatTableModule in AppModule or in the Module where you component is declared.

@NgModule({
  imports: [
    MatTableModule
    ...
  ]
})
public class AppModule

answered May 28 '19 at 11:36

Sajeetharan

216,225
63
350
396

What about pipes ? it gives me the following:The pipe 'dateFormat' could not be found – Fares Ayyad May 28 '19 at 11:42
pipe needs to be added too under declarations https://stackoverflow.com/questions/42576420/how-to-declare-a-pipe-globally-to-use-in-different-modules – Sajeetharan May 28 '19 at 11:45
i add it so it give the following: Unexpected pipe 'DateFormatPipe' imported by the module 'AppModule'. Please add a @NgModule annotation. – Fares Ayyad May 28 '19 at 11:52
import the SharedModule under orders module – Sajeetharan May 28 '19 at 12:12
take a look at last code block: imports: [ CommonModule, OrdersRoutingModule, QuillModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatDialogModule, MatFormFieldModule, MatCheckboxModule, NgbModule, SharedModule ], – Fares Ayyad May 28 '19 at 12:16

Angular 7 Can't bind to after using lazy loading

1 Answers1