Property 'map' does not exist on type 'Observable'
up vote
-1
down vote
favorite
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.
angular typescript angular6 angular7
add a comment |
up vote
-1
down vote
favorite
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.
angular typescript angular6 angular7
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
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.
angular typescript angular6 angular7
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.
angular typescript angular6 angular7
angular typescript angular6 angular7
asked Nov 10 at 13:16
Peter Penzov
4958177372
4958177372
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
3
down vote
accepted
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.
Thanks. Now I getERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type asany
. And that should fix it.
– SiddAjmera
Nov 10 at 13:23
add a comment |
up vote
0
down vote
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';
I getERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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.
Thanks. Now I getERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type asany
. And that should fix it.
– SiddAjmera
Nov 10 at 13:23
add a comment |
up vote
3
down vote
accepted
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.
Thanks. Now I getERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type asany
. And that should fix it.
– SiddAjmera
Nov 10 at 13:23
add a comment |
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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.
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.
edited Nov 10 at 13:55
answered Nov 10 at 13:17
SiddAjmera
11.2k21137
11.2k21137
Thanks. Now I getERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type asany
. And that should fix it.
– SiddAjmera
Nov 10 at 13:23
add a comment |
Thanks. Now I getERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type asany
. And that should fix it.
– SiddAjmera
Nov 10 at 13:23
Thanks. Now I get
ERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
Thanks. Now I get
ERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'.
– Peter Penzov
Nov 10 at 13:21
@PeterPenzov, specify it's type as
any
. And that should fix it.– SiddAjmera
Nov 10 at 13:23
@PeterPenzov, specify it's type as
any
. And that should fix it.– SiddAjmera
Nov 10 at 13:23
add a comment |
up vote
0
down vote
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';
I getERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
add a comment |
up vote
0
down vote
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';
I getERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
add a comment |
up vote
0
down vote
up vote
0
down vote
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';
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';
edited Nov 10 at 13:28
answered Nov 10 at 13:21
Abhishek Ekaanth
882923
882923
I getERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
add a comment |
I getERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
I get
ERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
I get
ERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'.
– Peter Penzov
Nov 10 at 13:22
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
answer updated.
– Abhishek Ekaanth
Nov 10 at 13:24
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
I get ERROR in src/app/panel/service/download.service.ts(21,65): error TS2345: Argument of type '{ responseType: ResponseContentType; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type 'ResponseContentType' is not assignable to type '"json"'.
– Peter Penzov
Nov 10 at 13:25
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
please check now
– Abhishek Ekaanth
Nov 10 at 13:28
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239326%2fproperty-map-does-not-exist-on-type-observableblob%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown