Property 'map' does not exist on type 'Observable<Blob>'

Question

I want to implement file download using this Angular 6 code:

Rest API:

@GetMapping("export")
    public ResponseEntity<InputStreamResource> export() throws IOException {
        ClassPathResource pdfFile = new ClassPathResource(EXTERNAL_FILE_PATH);

        HttpHeaders headers = new HttpHeaders();
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");

        return ResponseEntity.ok().headers(headers).contentLength(pdfFile.contentLength())
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(pdfFile.getInputStream()));
    }

Service:

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs/index";
import {environment} from "../../../environments/environment";
import {HttpUtils} from "../common/http-utils";
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private http: HttpClient) {
  }

  downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, { responseType: 'blob' }).map(
    (res) => {
        return new Blob([res.blob()], { type: 'application/pdf' });
    });
  }  
}

Component:

import {Component, OnInit} from '@angular/core';
import {DownloadService} from "../service/download.service";
import {ActivatedRoute, Router} from "@angular/router";
import {flatMap} from "rxjs/internal/operators";
import {of} from "rxjs/index";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-download',
  templateUrl: './download.component.html',
  styleUrls: ['./download.component.scss']
})
export class DownloadComponent implements OnInit {

  constructor(private downloadService: DownloadService,
              private router: Router,
              private route: ActivatedRoute) {
  }

  ngOnInit() {   
  }

  export() {               
    this.downloadService.downloadPDF().subscribe(res => {
      const fileURL = URL.createObjectURL(res);
      window.open(fileURL, '_blank');
    });         
  } 
}

When I start angular I get error: ERROR in src/app/panel/service/download.service.ts(17,91): error TS2339: Property 'map' does not exist on type 'Observable'.

What is the proper wya to import map into the code? When I clink download button nothing happens.

SiddAjmera SiddAjmera · Accepted Answer · 2018-11-10T13:17:53

You're probably using Rxjs 5.5 or later.

You can no longer chain operators like map directly on an Observable Value after Rxjs 5.5. You'll have to use .pipe and then pass the comma separated list of operators instead.

import { map } from 'rxjs/operators';
...
downloadPDF(): any {
  return this.http.get(environment.api.urls.downloads.getPdf, {
    responseType: 'blob',
    observe: 'response'
  })
  .pipe(
    map((res: any) => {
      return new Blob([res.blob()], { type: 'application/pdf' });
    })
  );
}

Here's a Sample StackBlitz for your ref.

BTW, Explorer is an amazing tool to check how the Rxjs syntax has changed so far.

Property 'map' does not exist on type 'Observable<Blob>'

2 Answers