CODEWITHSUNDEEP
angulartypescriptangular6angular7
Peter Penzov
Peter Penzov

Reputation: 1680

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

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.

Upvotes: 2

Views: 5104

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39462

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.

Upvotes: 6

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2567

You can call the request something like this because you're using angular 6

downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, { responseType: 'blob' });
  }

UPDATE : import ResponseContentType

import {Http, ResponseContentType} from '@angular/http';

Upvotes: 0

Related Questions