ServerDataSource with HttpClien inteceptor

[MerkulovDev]

I'm using HttpClient and i have Interceptor to insert headers as token etc. How can i work with ServerDataSource and HttpClient through my interceptor? I tried base test (without interceptor) as

constructor(
        http: HttpClient,
    ) {
        this.source = new ServerDataSource( http, { endPoint: 'https://site.here/black_listed_client?_page=1&_limit=50&_order=DESC&_sort=id' } );
    }

It shows an error:

Argument of type 'HttpClient' is not assignable to parameter of type 'Http'. Property '_backend' is missing in type 'HttpClient'.

Also when im set _page=1&_limit=100 its ignored and im my request it looks like

?_order=DESC&_sort=id&_page=1&_limit=100&_page=1&_limit=10 It automatically added last 2 params as page=1 and limit=10

Now about work with interceptor. all my requests looks like Service

 public getInfo(url:string): Observable<any>{
      return this.http.get(url);
  }

request

this.scoringService.getInfo('/scoring/stoplists/black_listed_client').subscribe(value => {
                // value - результат
                this.source = JSON.parse(value);
            },

interceptor
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const url = '/';
        req = req.clone({
            url: url + req.url,
            responseType: 'text',
            headers: req.headers.set('Authorization', this.sessionStorage.retrieve('access_token'))
        });
........
}

[angularroockie]

import { Http,HttpClient } from '@angular/http'; is your header like this ? if not try adding this .. if it does not works please do let me know ...

[MerkulovDev]

@angularroockie interceptor header

import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse, HttpParams, HttpResponse} from '@angular/common/http';
import 'rxjs/add/operator/first';
import {SessionStorageService} from 'ng2-webstorage';
import { ToasterService } from 'angular2-toaster';
import {Router} from '@angular/router';

component header

import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
import { ScoringService } from '../../../services/scoring.service';
import { DatePipe } from '@angular/common';
import { ToasterService } from 'angular2-toaster';
import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';
import { HttpClient } from '@angular/common/http';
import { LocalDataSource, ServerDataSource } from 'ng2-smart-table';
import { PaginationInstance } from 'ngx-pagination';

In your case i got an error

Module '"....angular/common/http"' has no exported member 'Http'.

[MerkulovDev]

if i make changes in ng2-smart-table module. error is gone but i've got new one.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'has' of undefined TypeError: Cannot read property 'has' of undefined at ServerDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/server/server.data-source.js.ServerDataSource.extractTotalFromResponse (server.data-source.js:62)

I've made changes in file server.data-source.d.ts. changed Http to HttpClient. Why module is useing old method?

I think the probles is non actual version of smart-table module

[miguelferreira311]

@MerkulovDev Hi! Have you managed to solve this problem?

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'has' of undefined TypeError: Cannot read property 'has' of undefined at ServerDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/server/server.data-source.js.ServerDataSource.extractTotalFromResponse (server.data-source.js:62)

I have the exact same problem...

[grinjaok]

@MerkulovDev Same issue. Please let me know if you find solution

[MerkulovDev]

@grinjaok i'm using local.data

[dvirHam]

It works with the Http (angular/http) library and not HttpClient (so far).

[anshumansworld]

declare interceptor in your module as well:

{
  provide: HTTP_INTERCEPTORS,
  useClass: TokenInterceptor, // Your Interceptor class
  multi: true
}

This should also be added in your module where you are using smart table.