Свойство 'map' не существует для типа 'Observable <Blob>'

Question

Я хочу осуществить загрузку файла, используя этот код Angular 6:

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()));
    }

Услуги:

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' });
    });
  }  
}

Компонент:

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');
    });         
  } 
}

Когда я запускаю angular, я получаю сообщение об ошибке: ОШИБКА в src / app / panel / service / download.service.ts (17,91): ошибка TS2339: свойство 'map' не существует для типа 'Observable'.

Как правильно импортировать map в код? Когда я нажимаю кнопку загрузки, ничего не происходит.

Answer 1

Вы можете назвать запрос примерно так, потому что вы используете угловую 6

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

ОБНОВЛЕНИЕ: импорт ResponseContentType

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

Answer 2

Возможно, вы используете Rxjs 5.5 или более позднюю версию.

Вы не можете больше связывать операторы, такие как map, непосредственно на наблюдаемом значении после Rxjs 5.5. Вам нужно будет использовать .pipe и затем передать список операторов через запятую.

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' });
    })
  );
}

Вот Образец StackBlitz для вашей ссылки.

Кстати, Explorer - удивительный инструмент для проверки того, как изменился синтаксис Rxjs.