2

I'm just starting with Angular 2 and I'm trying to get a http request.

The code is as follows

import { Component, View, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';

@Component({
  selector: 'my-app'
})
@ View({
  directives: [TodoInput, TodoList]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
    https.getHttpData();
  }

}
bootstrap(AppComponent, [TodoService, HttpService]);

and the http service is as follows:

import { Http, HTTP_PROVIDERS } from 'angular2/http';
import {Injectable} from 'angular2/core'

@Injectable()
export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=walking';

    data: array[string] = [];   

    logError(error):void {
        console.log(error);
    }

    constructor(public http: Http) {

    }


    public getHttpData() {
        this.http.get(this.url)
            .map(res => res.json())
            .subscribe(
                data => this.data = data,
                err => this.logError(err), 
                () => console.log('Random Quote Complete')
            );
    }
}

When I ran the app, I get the following error: EXCEPTION: No provider for e! (AppComponent -> HttpService -> e) and angular2.dev.js:21835 Error: DI Exception

Any ideas? What am I missing?

Thanks in advance for your help.

UPDATE I managed to make it work. I hope it's correct, but it works:

import { Component, View, NgFor, FORM_DIRECTIVES, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';
import { HTTP_PROVIDERS } from 'angular2/http';

@Component({
  selector: 'my-app'
})
@View({
  directives: [TodoInput, TodoList, NgFor, FORM_DIRECTIVES]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;
  shows: [string] = [];

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
  }


  searchShows():void {
    this.https.getHttpData(this.keyword).subscribe(
      data => this.shows = data.Search,
      err => console.log(err),
      () => console.log('done!')
    );
  }
}

bootstrap(AppComponent, [HTTP_PROVIDERS, TodoService, HttpService]);

And my service class:

import { Http } from 'angular2/http';
import { Inject } from 'angular2/core'

export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=';

    data: [string] = [];    

    logError(error):void {
        console.log(error);
    }

    constructor(@Inject(Http) public http: Http) {
    }


    public getHttpData(keyword) {

        return this.http.get(this.url + keyword)
            .map(res => res.json());
    }
}

I can't, however, make it work so that the service is the only class that uses all the http needed dependencies. It seems like the main class has to bootstrap http_providers. Not sure why.

2
  • I think the constructor should be constructor(@Inject(Http) http: Http){ Commented Oct 31, 2015 at 0:06
  • still getting the same error... Commented Oct 31, 2015 at 0:37

1 Answer 1

2

I don't use Angular 2, but

  • Are you sure with HTTP_PROVIDERS inside import? Http isn't enough?
  • In provided code you have a whitespace between "@" and "View" :)
Sign up to request clarification or add additional context in comments.

5 Comments

Good obervation : HTTP_PROVIDERS should be injected through boostrap or providers/viewProviders in the component.
yes, adding HTTP_PROVIDERS through bootstrap of the main.ts solved the issue! However, when adding it through providers/viewProviders in the httpService.ts, it didn't work (blank page, no errors). Any ideas why the latter didn't work?
@uglycode you must use those in the component : @Component({providers:[HTTP_PROVIDERS]}) not in your service class
@EricMartinez I'm not exactly sure what you mean. I've added this when bootstrapping the app: bootstrap(AppComponent, [HTTP_PROVIDERS, TodoService, HttpService]); and included this at the top of the class: import { HTTP_PROVIDERS } from 'angular2/http'; and it works. I didn't need to add it what you've written to the @Component. I will edit my original post and paste the solution that works and you can tell me where (if) I did anything wrong.
Http is not enough because Http itself depends on another classes. HTTP_PROVIDERS is kind of syntactic sugar that keeps away you from importing all the dependencies of the classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.