1

I have tried to call the API by post method but I got this error:

this._defaultOptions.merge is not a function ...

I was checking a few answer and I tried to import and doesn't work

  • import 'rxjs/add/operator/map';
  • import 'rxjs/rx';

Here is my code if you want to give it a try, please:

books.service.ts

import {Injectable} from 'angular2/core';
import {iBooks} from './books.interface';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class bookService {
    private _getApi = 'URLAPI';

    constructor(private _http: Http) { }

    getInfo(payload: any): Observable<iBooks[]> {
        return this._http.post(this._getApi, payload)
            .map((response: Response) => <iBooks[]>response.json())
            .do(data => console.log("All: " +  JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}

Also the component

books.component.ts

import {iBooks}                  from './books.interface';
import {bookService}            from './books.service';

@Component({
    selector:       'books-list',
    templateUrl:     './books.component.html',
    providers:      [bookService]
})

export class bookComponent implements OnInit {

    errorMessage: string;

    trips: iBooks[];
    _payload: bookMode;

    constructor(private _bookService: bookService){

    }
    ngOnInit(): void {
    this._bookService.getInfo(this._payload)
        .subscribe(
            trips => this.trips = trips,
            error => this.errorMessage = <any>error);
    }
}
export class bookMode{
    Name: string;
    Pages: number;
    Items: number;
}

UPDATE

books.interface.ts

export interface iBooks {
    Name: string;
    Pages: number;
    Items: number;
}

UPDATE 2

I included the app.component and main

main.ts

import {bootstrap}          from 'angular2/platform/browser';
import {AppComponent}       from './app.component';
import {provide}            from 'angular2/core';
import {ROUTER_PROVIDERS}   from 'angular2/router';

import 'rxjs/Rx';

import {HTTP_PROVIDERS, Headers, RequestOptions} from 'angular2/http'; // Required by credetials 

class requestCredentials {
headers: Headers = new Headers({
    'X-Requested-With': 'XMLHttpRequest'
});
withCredentials: boolean = true;
}

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(RequestOptions, {useClass: requestCredentials})]);

app.component.ts

import {Component, ElementRef} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, RouterLink } from 'angular2/router';

import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx'; 

import {EmptyComponent}        from './myComponent.component'

@Component({
    selector: 'my-app',
    templateUrl: './myComponent.component.html',
    directives: [ROUTER_DIRECTIVES, RouterLink]
})

export class AppComponent {

}

Any Help will be wonderful. Thanks guys

rodboc
  • 459
  • 1
  • 8
  • 19
  • The error message is about `merge` but your tried fix is about `map`. I don't see `defaultOptions` or `merge` to be used in your code anywhere. Can you provide more details (full stack trace, more code, ...)? – Günter Zöchbauer Jun 01 '16 at 03:53
  • Thanks @GünterZöchbauer I included the interface and the full code. Please keep in mind that the post request use a payload = bookMode – rodboc Jun 01 '16 at 04:02
  • The added code still doesn't contain any `merge` or `defaultOptions`. Do you get a stack trace? The `defaultOptions` might come from `Http`. – Günter Zöchbauer Jun 01 '16 at 04:07
  • @GünterZöchbauer I am not using `merge` or `defaultOptons` and the only one when I found it was in the http.dev.js. I traced the result but the error is created when call `.map ...`. It seems that something i am doing wrong – rodboc Jun 01 '16 at 04:18
  • Yes, that's what I assumed (my previous comment). Can you please provide the stack trace from the browser console? How and where do you provide `HTTP_PROVIDERS`? – Günter Zöchbauer Jun 01 '16 at 04:22
  • This time @GünterZöchbauer I included the main.ts and app.component.ts with the call to http_providers. Thanks – rodboc Jun 01 '16 at 04:29
  • Can you please try to temporarily remove the `RequestOptions` provider. It is likely the error is caused by this. – Günter Zöchbauer Jun 01 '16 at 04:36
  • I removed from the `bootstrap(...)` and now looks like this `bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, requestCredentials]); ` But now the credentials don't work @GünterZöchbauer – rodboc Jun 01 '16 at 04:40
  • @rodboc You should probably look at how angular2-jwt wraps http to add authentication to requests. I also have the feeling that there are type checks for request options, so defining a new class probably isn't helping either. – Mike Lovelace Jun 01 '16 at 13:23

1 Answers1

2

Change requestCredentials to

@Injectable()
export class requestCredentials extends RequestOptions {
  constructor() {
    let headers = new Headers();
    headers.append('X-Requested-With', 'XMLHttpRequest');

    super({method: RequestMethod.Get, headers: headers, withCredentials: true});
  }
}

(not tested)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • It doesn't work, it seems that 'withCredentials: true' is not an args of RequestOptions. That is the error: ts] Argument of type '{ method: RequestMethod; headers: Headers; withCredentials: boolean; }' is not assignable to parameter of type 'RequestOptionsArgs'. Object literal may only specify known properties, and 'withCredentials' does not exist in type 'RequestOptionsArgs'. – rodboc Jun 01 '16 at 05:12
  • I saw it here https://github.com/angular/angular/blob/master/modules/@angular/http/src/base_request_options.ts#L59 but it seems this was a recent addition and is not yet included in RC.1. This might help http://stackoverflow.com/questions/35007572/angular2-xhrfields-withcredentials-true and http://stackoverflow.com/questions/34969292/how-to-set-default-http-header-in-angular2 – Günter Zöchbauer Jun 01 '16 at 05:24
  • Thanks Mate, do you now another solution I could take a look? because is it is not release I can't do anything. – rodboc Jun 01 '16 at 05:38
  • Only the two answers I linked to in my previous comment. – Günter Zöchbauer Jun 01 '16 at 05:46
  • Thanks Mate, I appreciate your help – rodboc Jun 01 '16 at 11:25