angular: RC5 Breaking Change - Http UMD

I’m submitting a … (check one with “x”)

[ X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Post RC5 upgrade, facing below error -

platform-browser.umd.js:937 EXCEPTION: TypeError: Cannot read property ‘toString’ of nullBrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 platform-browser.umd.js:937 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4391next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 platform-browser.umd.js:937 TypeError: Cannot read property ‘toString’ of null at Request.Body.text (http.umd.js:1138) at Request.getBody (http.umd.js:1720) at Observable.eval as _subscribe at Observable.subscribe (Observable.ts:93) at Observable._subscribe (Observable.ts:152) at MapOperator.call (map.ts:54) at Observable.subscribe (Observable.ts:93) at Observable._subscribe (Observable.ts:152) at CatchOperator.call (catch.ts:32) at Observable.subscribe (Observable.ts:93)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:463 TypeError: Cannot read property ‘toString’ of null(…)consoleError @ zone.js:463drainMicroTaskQueue @ zone.js:477ZoneTask.invoke @ zone.js:426

Angular version: 2.0.0-rc.5

  • Browser: [all]
  • Language: [all | TypeScript 1.8.10 | ES5]

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 8
  • Comments: 27 (2 by maintainers)

Most upvoted comments

For me, this turned out to be because I use Http#request directly with a RequestOptionsArgs that I constructed myself. I tried explicitly setting an empty body (body: "") and everything works again.

basically, if you’re using request options, you have to make a get request, you can’t leave the body empty.

options = new RequestOptions({
    body: '',
    headers: this.noPreFlightHeaders,
    withCredentials: true
  });

It seems that if you remove headers.append("Content-Type", "application/json"); it works.

The following work-around seems to resolve the issue: let options = new RequestOptions({ headers: headers, body: '' });

This bug seems to only occur when a Content-Type header is set. Here is a minimal reproduction of the problem. http://plnkr.co/edit/uMQlKO7RKvyRVJ2Y1L6v?p=preview

@yves-s - You’re right. If you specify Content-Type and no body, rc5 will complain. I was fixing it by adding an empty body, but removing the Content-Type header is better.

In your call to this.http.get, in the options object (the second argument, for which you currently have { headers: headers }), add another property body: “”. On Wed, Aug 10, 2016 at 6:22 PM Brendan Alexander notifications@github.com wrote:

Can somebody show me how to use RequestOptions with a get request with body:‘’. Here is what was working until I upgraded to RC5:

let headers = new Headers(); headers.append(“Content-Type”, “application/json”); headers.append(“Authorization”, "Bearer " + this.globalEventsManager.authentication.token); let get: Observable = this.http.get(url, { headers: headers }).map((response) => {//do something etc});

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/10612#issuecomment-239051625, or mute the thread https://github.com/notifications/unsubscribe-auth/AAK7e02Oq3LWlGj4D9wysopz9q1NDqn2ks5qenlWgaJpZM4JgiyT .

this would be an easy PR if anybody wants to fix

Same here. It’s definitely the ‘Content-Type’ in the headers for GET requests. Thanks for posting that solution @yves-s.

TLDR; Set options.body = '' for GET requests but not for other http verbs (i.e. PUT or POST)

Note that if you are automatically adding headers (like an auth token) to all http verbs, putting a value for body in the options parameter will override the the value for the body parameter.
Example:

class BearerAuthInterceptorNg2 extends Http {
  public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    // must set options.body = '' to work around this bug
    return this.intercept(super.get(url, this.getRequestOptionsArgs(options)));
  }

  public post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    // setting options.body = '' will override the body parameter in super.post
    return this.intercept(super.post(url, body, this.getRequestOptionsArgs(options)));
  }
}