Angular 2 app error in Firefox

[ElenaOrel]

Angular version: 2.0.0-rc.5, 2.1.1
Browser:Firefox

I have a problem with my Angular 2 application in Firefox.
No problems in Internet Explorer and Chrome.

My page with the problem:
http://www.asbuiltsolutions.com/AsbuiltQuotes.html?p=1
enter 415 and click Next Step.

the debug point is in the app.services.js,
function is APIRequestService.prototype.getPrice

I posted the question at
http://stackoverflow.com/questions/40388774/angular-2-on-promise-call-in-firefox

but have no answer.

Again - no problems with IE and Chrome.
The stack trace in FireFox:

An error occurred SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Stack trace:
Json</Json.parse@http://www.asbuiltsolutions.com/node_modules/@angular/http//bundles/http.umd.js:133:44
Body</Body.prototype.json@http://www.asbuiltsolutions.com/node_modules/@angular/http//bundles/http.umd.js:1118:24
APIRequestService.prototype.extractData@http://www.asbuiltsolutions.com/app/app.services.js:78:20
ZoneDelegate.prototype.invoke@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:203:19
NgZoneImpl/this.inner<.onInvoke@http://www.asbuiltsolutions.com/node_modules/@angular/core//bundles/core.umd.js:9245:36
ZoneDelegate.prototype.invoke@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:202:19
Zone.prototype.run@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:96:24
scheduleResolveOrReject/<@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:462:52
ZoneDelegate.prototype.invokeTask@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:236:23
NgZoneImpl/this.inner<.onInvokeTask@http://www.asbuiltsolutions.com/node_modules/@angular/core//bundles/core.umd.js:9236:36
ZoneDelegate.prototype.invokeTask@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:235:23
Zone.prototype.runTask@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:136:28
drainMicroTaskQueue@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:368:25
ZoneTask/this.invoke@http://www.asbuiltsolutions.com/node_modules/zone.js/dist/zone.js:308:25

[DzmitryShylovich]

Angular version: 2.0.0-rc.5, 2.1.1

rc5 or 2.1.1?

Pls add a minimal plunker with reproduction.

[ElenaOrel]

rc5 on production, 2.1.1 on my local comp - the same problem

[ElenaOrel]

cannot post on plunker - web api 2 services and database involved.
My page with the problem:
http://www.asbuiltsolutions.com/AsbuiltQuotes.html?p=1
enter 415 and click Next Step.

[pkozlowski-opensource]

@ElenaOrel you are getting XML from the server when used in FFox and JSON when used in Chrome. Probably difference in default headers sent. It doesn't sound like Angular-related issue.

[pkozlowski-opensource]

So what I can see is that FFox is sending different Accept headers (text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8) vs. */* in Chrome.

Impossible to say more without code / minimal reproduction scenario but I assume that default Accept headers are different from one browser to another. @ElenaOrel you've got 2 options:

• specify desired Accept headers
• change you server config so it responds with JSON

In any case I don't think there is much we can do on the Angular side so going to close this one for now. Happy to re-open if new info surfaces.

[ElenaOrel]

import { Injectable } from '@angular/core';
import { TravelPrice, State, Quotes, QuotesReturn, AddMessage, SendMessage } from './app.models';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class APIRequestService {
private APIGetPrice = './api/GetPrice?zipcode=';
private APIGetQuotes = './api/Quotes';
private headers = new Headers({ 'Content-Type': 'application/json' });
constructor(private http: Http) { }
getPrice(zipcode: string): Promise {
return this.http.get(this.APIGetPrice + zipcode)
.toPromise()
.then(this.extractData)
.catch(this.handleError);
}
getQuotes(quotes: Quotes): Promise {
let data =JSON.stringify(quotes);
return this.http
.post(this.APIGetQuotes, data, { headers: this.headers })
.toPromise()
.then(this.extractData)
.catch(this.handleError);
}

private extractData(res: Response) {
   let body = res.json();
  return body || {};
}


private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
}

}

[ElenaOrel]

Pawel, thank you very much for your help. You pointed me in the right direction.
I have changed
private headers = new Headers({ 'Content-Type': 'application/json' });
to
private headers = new Headers({ 'Content-Type': '/' });
and restricted xml type in my WebApiConfig file as:
var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

Thank you!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}