CODEWITHSUNDEEP
angularangular2-templateangular2-directivesangular2-services
rodboc
rodboc

Reputation: 489

API post call conflict Angular2 .map defaultOptions.merge is not a function in

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

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

Upvotes: 1

Views: 438

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

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)

Upvotes: 2

Related Questions