Angular 4/5 HttpClient: 문자열 형식의 인수를 'body'에 할당할 수 없습니다.

Angular 4/5 HttpClient: 문자열 형식의 인수를 'body'에 할당할 수 없습니다.

Angular 문서는 다음과 같이 말합니다.

응답 기관에서 필요한 모든 데이터를 반환하지는 않습니다.때때로 서버는 특정 조건을 나타내기 위해 특수 헤더 또는 상태 코드를 반환하며, 이러한 헤더를 검사해야 할 수 있습니다.이렇게 하려면 관찰 옵션이 있는 본문 대신 전체 응답을 원한다고 HttpClient에 말할 수 있습니다.

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

그러나 이를 시도하면 컴파일 시간 오류가 발생합니다(그러나 런타임 오류는 없으며 예상대로 작동함).

오류 TS2345: '{headers:HttpHeaders; 관찰: string; }'은(는) '{headers?:' 유형의 매개 변수에 할당할 수 없습니다.HttpHeaders | {[헤더: string]: string | string[]; }; 관찰하시겠습니까?:"본체"; 매개 변수?:'흐흐...''관찰' 속성 유형이 호환되지 않습니다.'string' 형식은 'body' 형식에 할당할 수 없습니다.

왜요? 저는."@angular/http": "^5.1.0"

내 버전의 코드는 다음과 같습니다.

  login(credentials: Credentials): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
      observe: 'response'
    };
    return this.httpClient.post<any>(`${environment.USER_SERVICE_BASE_URL}`,
      {'username': credentials.username, 'password': credentials.password}, options)
      .map((res) => ...

옵션에 줄을 서야 합니다.github 티켓 #18586, 입장 기준alxhub2017년 8월 9일에

get()에 대한 올바른 반환 유형을 선택하려면 Typescript에서 관찰 및 응답Type 값을 정적으로 추론할 수 있어야 합니다.잘못 입력된 옵션 개체를 전달하면 올바른 반환 유형을 추론할 수 없습니다.

login(credentials: Credentials): Observable<any> {
    return this.httpClient.post<any>(`${environment.USER_SERVICE_BASE_URL}`,
      {'username': credentials.username, 'password': credentials.password}, {
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
      observe: 'response'
    })
      .map((res) => ...

유형 스크립트가 이 문제에 대해 불만을 제기합니다.

'string' 유형을 "body" 유형에 할당할 수 없습니다.

이 문제를 해결하려면 문자열을 본문으로 수동으로 변환합니다.예:

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      observe: 'response' as 'body'
    };
    return this.http.post<any>(url, data, httpOptions);

옵션을 인라인화하지 않고(코드가 깨끗하지 않을 수 있음) 이 문제를 해결하는 방법은 요청 옵션을 위한 인터페이스를 만드는 것이었습니다.코드는 다음과 같습니다.

export interface IRequestOptions {
    body?: any;
    headers?: HttpHeaders | { [header: string]: string | Array<string> };
    observe?: any;
    params?: HttpParams | { [param: string]: string | Array<string> };
    reportProgress?: boolean;
    responseType?: "arraybuffer" | "blob" | "json" | "text";
    withCredentials?: boolean;
}

그러면 다음과 같이 사용됩니다.

const options: IRequestOptions = {
    headers: new HttpHeaders({"Content-Type": "application/json"}),
    observe: "response"
};
return this.httpClient.post(`${environment.USER_SERVICE_BASE_URL}`,
    {"username": credentials.username, "password": credentials.password}, options)
    .pipe(
        map((res: HttpResponse<any>) => ...
    );

원래 게시물에서 사용할 변경lettable또는pipeable(현재 이름이 오늘일 경우) 연산자

import { HttpHeaders, HttpParams } from '@angular/common/http';
export interface IRequestOptions {
    headers?: HttpHeaders | { [header: string]: string | string[]; };
    observe: "response"; 
    params?: HttpParams | { [param: string]: string | string[]; };
    reportProgress?: boolean; 
    responseType?: "json";
    withCredentials?: boolean; 
}

언급URL : https://stackoverflow.com/questions/47761262/angular-4-5-httpclient-argument-of-type-string-is-not-assignable-to-body