How to fix "Error: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable"?

Question

I'm using angular material table in that pagination is not working only in server but working fine in local. In server when I'll open the page which contains the table, the data is pushed in the table but the pagination is not working and error is popup

ERROR TypeError: You provided 'undefined' where a stream was expected.
You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub
(mergeMap.js:74)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext
(mergeMap.js:68)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next
(mergeMap.js:51)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
(Subscriber.js:53)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe
(Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
(Observable.js:29)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call
(mergeMap.js:29)

Component.ts

getCustomerinfoList(): void {
    this.adminService.getCustomerinfoList(this.componentName, this.selectedCustomer.customer_id)
      .subscribe(customerlist => {
        let c_rates = customerlist[0][0].customer_routes;
        this.customers = customerlist;
        this.cust_specificData = c_rates ? JSON.parse(c_rates) : [];
        this.cInfo_dataSource.data = this.cust_specificData
        this.cInfo_dataSource.paginator = this.Routepaginator;
        this.cInfo_dataSource.sort = this.Routesort;
      }
  }

service.ts

getCustomerinfoList(actionComponentName: String, customerid: number) {
    const url = `${this.baseURL + actionComponentName}/getCustomerRateAccessories?customer_id=${customerid}&access_token=${this.authService.getAuthToken()}`;
    return this.http.get<any>(url, this.httpOptions)
  }

Interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import { tap, catchError } from 'rxjs/operators';


@Injectable()

export class loadingInterceptor implements HttpInterceptor {

  intercept(req: any, next: HttpHandler): Observable<HttpEvent<any>> {

    let loadingContainer: HTMLElement = document.getElementsByClassName('bg-pre-loader').item(0) as HTMLElement

    loadingContainer.style.display = 'flex';

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          loadingContainer.style.display = 'none';
        }
      }), catchError((err) => {
        loadingContainer.style.display = 'none';
        return Observable.throw(err);
      })
    )
  }
}

I expect the data should push in table and the data should able to paginate

note: this code work fine in local, only in server it's not working as expected

Answer 1

Actually error is in material table paginator it's got resolved when it's removed

thanks everyone