angular 2 rc4 http requests throwing uncaught (in promise) exception

Question

did something change with angualr 2 http service after the upgrade to angular2 rc4?

I have been going through the docs on angular http client and scoured stack overflow all day, but I could not figure out the problem.

below are snippets of my code implementation and the error I get, can anyone please thell me what I am doing wrong.

this is my code

    import { Restaurant } from '../index'
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    import { Injectable } from '@angular/core';

    import 'rxjs/Rx';
    import { Observable } from 'rxjs/Observable';

@Injectable() 
export class RestaurantService {
    constructor(private _http: Http){}

    addRestaurant(restaurant: Restaurant): Observable<Restaurant> {
        let body = JSON.stringify({restaurant});
        let headers = new Headers({ 'Content-Type':'application/json'});
        let options = new RequestOptions({ headers: headers});
        console.log(body);
        return this._http.post('http://localhost:3000/restaurant', body, options)
            .map(this.extractData)
            .catch(this.errorHandler)
    }


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

    private errorHandler(error:any) {
       return Observable.throw(error.json());
     }
    }

and the service is implemented in my code below

import { Component, OnInit, OnDestroy } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES, FormArray,  FORM_DIRECTIVES, FormControl, FormGroup } from '@angular/forms';
import { Restaurant } from './index';
import { RestaurantService } from '../../index';

@Component({
    moduleId: module.id,
    selector: 'sd-restaurant-form',
    templateUrl: 'restaurant-form.component.html',
    styleUrls: ['restaurant-form.component.html'],
    directives: [REACTIVE_FORM_DIRECTIVES]
})
export class RestaurantFormComponent implements OnInit, OnDestroy {
    formActive: boolean = true;


    restaurantForm = new FormGroup( {
        .........
        .........

    });

    constructor(public restaurantService: RestaurantService) { }

    onSubmit() {
        let value = this.restaurantForm.value;

        ............
        ............
        ............

        this.restaurantService.addRestaurant(this.restaurant)
        .subscribe(
            res =>{ this.result = res,
                    console.log(this.result)},
            error=> {this.error = error.
                    console.log(this.error)}
        )
    }


    ngOnInit() { 
        for (let i=0; i<24; i++) { 
            if( i === 0) {
               this.timesHour.push(0 +''+i); 
            }
            else if ((Math.log10(i)+1) < 2 ) {
                this.timesHour.push(0 +''+i);
            } else {
                this.timesHour.push(String(i));
            }
        }
        for (let i=0; i<60; i++) {
            if( i === 0) {
               this.timesMin.push(0 +''+i); 
            }
            else if ((Math.log10(i)+1) < 2 ) {
                this.timesMin.push(0 +''+i);
            } else {
                this.timesMin.push(String(i));
            }
        }
    }

    ngOnDestroy() {}

}

and this is the error I get

EXCEPTION: Error: Uncaught (in promise): Can't resolve all parameters for RestaurantFormComponent: (?).
EXCEPTION: Error: Uncaught (in promise): Can't resolve all parameters for RestaurantFormComponent: (?).
STACKTRACE:
Error: Uncaught (in promise): Can't resolve all parameters for RestaurantFormComponent: (?).
    at resolvePromise (zone.js?1467669664341:538)
    at zone.js?1467669664341:515
    at ZoneDelegate.invoke (zone.js?1467669664341:323)
    at Object.onInvoke (core.umd.js:9100)
    at ZoneDelegate.invoke (zone.js?1467669664341:322)
    at Zone.run (zone.js?1467669664341:216)
    at zone.js?1467669664341:571
    at ZoneDelegate.invokeTask (zone.js?1467669664341:356)
    at Object.onInvokeTask (core.umd.js:9091)
    at ZoneDelegate.invokeTask (zone.js?1467669664341:355)
Unhandled Promise rejection: Can't resolve all parameters for RestaurantFormComponent: (?). ; Zone: angular ; Task: Promise.then ; Value: BaseException$1 {message: "Can't resolve all parameters for RestaurantFormComponent: (?).", stack: "Error: Can't resolve all parameters for Restaurant…ngular/compiler/bundles/compiler.umd.js:14640:81)"}
Error: Uncaught (in promise): Can't resolve all parameters for    RestaurantFormComponent: (?).(…)

Are you able to post the code for your RestaurantFormComponent. The error is coming from the first parameter in your constructor in that component not being injectable. — Ian
– Ian, Commented Jul 4, 2016 at 22:32
@ian the second block of code is my implementation of the RestaurantServince in the RestaurantFormComponent, as you can see the service has the '@Injectable' decorator. so it should be fine. I will edit it to make it clearer — John Adetutu
– John Adetutu, Commented Jul 4, 2016 at 23:09
Are you including your RestaurantService when you bootstrap the app? — Ian
– Ian, Commented Jul 4, 2016 at 23:30
yes .. I am, it is in the app.component.ts viewProvider,( I am using the mgechev angular2-seed) — John Adetutu
– John Adetutu, Commented Jul 4, 2016 at 23:40
@Component({ moduleId: module.id, selector: 'sd-app', viewProviders: [NameListService, HTTP_PROVIDERS, RestaurantService], templateUrl: 'app.component.html', directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent] }) — John Adetutu
– John Adetutu, Commented Jul 4, 2016 at 23:43

Musa Haidari · Accepted Answer · 2016-10-08 23:06:54Z

1

Even I had the same problem with angular 2 rc4, importing and using Inject solved the issue of can't resolve all parameters. Here's my code sample:

import { Injectable,Inject } from '@angular/core';
...


@Injectable() 
export class RestaurantService {
   constructor(@Inject(Http) private _http: Http) {
...
}

edited Oct 8, 2016 at 23:06

Musa Haidari

2,2836 gold badges33 silver badges54 bronze badges

answered Jul 17, 2016 at 3:10

Gopi

1,4852 gold badges10 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular 2 rc4 http requests throwing uncaught (in promise) exception

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related