title: HttpRequest and reportProgress not working or messing up my requests
body: <p>I am implementing a file upload service with Angular 5 and I want to give the user some feedback on the upload progress. I found several pages suggesting to use the <code>reportProgress</code> parameter that comes with Angulars <code>HttpClient</code>, but I cannot get it working.</p>
  
  <p>I use a wrapper class for all my http-requests, which then does some logic and finally all requests end up in the same method that's being called:</p>
  
  <pre><code>public request(request: HttpRequest&lt;any&gt;, options?: any): Observable&lt;any&gt; {
    return this.httpClient.request(request.method, request.url, {
      body: request.body,
      headers: request.headers,
      responseType: request.responseType,
      ...options
    });
  }
  </code></pre>
  
  <p>I then pass a upload (post) call to it, with <code>{ reportProgress: true }</code> as <code>options</code>. This did not work at all, nothing on the request changed. So I suspected, that I actually need to use the <code>reportProgress</code>-parameter in the HttpRequest constructor to make it work and changed my code accordingly:</p>
  
  <pre><code>public request(request: HttpRequest&lt;any&gt;, options?: any): Observable&lt;any&gt; {
    return this.httpClient.request(
      new HttpRequest(request.method, request.url, request.body, {
        headers: request.headers,
        responseType: request.responseType,
        ...options
      })
    );
  }
  </code></pre>
  
  <p>This leads to the even more weird behavior, that now no matter what my options look like, I always only receive <code>{type: 0}</code> as response from the request.</p>
  
  <p>What am I overseeing? I use Angular 5.1.1 and I am really a bit puzzled here right now.</p>
  
  <p>So to give an explicit example, right now I receive the same response for those two HttpRequests:</p>
  
  <pre><code>{  
    "url":"http://127.0.0.1:8888/test",
    "body":{  
     "data":"testdata"
    },
    "reportProgress":false,
    "withCredentials":false,
    "responseType":"json",
    "method":"POST",
    "headers":{ some-headers ... }
  }
  </code></pre>
  
  <p>and this request:</p>
  
  <pre><code>{  
    "url":"http://127.0.0.1:8888/api/pages",
    "body":{  
      "pageUrl":"http://localhost:1234/"
    },
    "reportProgress":true,
    "withCredentials":false,
    "responseType":"json",
    "method":"POST",
    "headers":{ some-headers ... }
  }
  </code></pre>