Property 'pipe' does not exist on type 'Subscription'

Question

I have the error:

TS2339: Property 'pipe' does not exist on type 'Subscription'

on the line identified with "HERE" bellow

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Source } from '../model/source';
import { map } from 'rxjs/operators';
import { Entry } from '../model/entry';


@Injectable()
export class SourcesService {
    private readonly API_URL = 'https://localhost:44384';
    constructor(private http: HttpClient) { }

findEntries(
    sourceId: number, filter = '', sortOrder = 'asc',
    pageIndex = 0, pageSize = 3): Observable<Entry[]> {

    return this.http.get(`${this.API_URL}/api/entries`, {
        params: new HttpParams()
            .set('sourceId', sourceId.toString())
            .set('filter', filter)
            .set('sortOrder', sortOrder)
            .set('pageIndex', pageIndex.toString())
            .set('pageSize', pageSize.toString()),
        observe: 'response'
    }).subscribe((res: any) => {
        const counter = JSON.parse(res.headers.get('X-Pagination')).totalCount;
    }).pipe(   // <<<=========================================================== HERE
        map((res: any) => {
            res['playload'] = res;
            return res['playload'];
        })
    );
}

Environment:

Angular CLI: 7.0.3
Node: 10.13.0
OS: win32 x64
Angular: 7.0.1

Answer 1

Remove subscribe that is not required.

Either you should subscribe or use rxjs operators and then at the end use subscribe.

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Source } from '../model/source';
import { map } from 'rxjs/operators';
import { Entry } from '../model/entry';


@Injectable()
export class SourcesService {
    private readonly API_URL = 'https://localhost:44384';
    constructor(private http: HttpClient) { }

findEntries(
    sourceId: number, filter = '', sortOrder = 'asc',
    pageIndex = 0, pageSize = 3): Observable<Entry[]> {

    return this.http.get(`${this.API_URL}/api/entries`, {
        params: new HttpParams()
            .set('sourceId', sourceId.toString())
            .set('filter', filter)
            .set('sortOrder', sortOrder)
            .set('pageIndex', pageIndex.toString())
            .set('pageSize', pageSize.toString()),
        observe: 'response'
    }).pipe( 
        map((res: any) => {
            res['playload'] = res;
            return res['playload'];
        })
    );
}