How to make ajax call with angular2/http?

Question

I am using Angular 2.0.0-beta.0 with typescript. I was able to make ajax call with window['fetch'] out of the box without any problem (and I did not need to use any of the workarounds required in earlier versions.)

But I could not make the same ajax call working with angular2's http.

Here is the code to demo the issue. There are three files, index.html in the project folder, and boot.ts and app.component.ts in a subfolder called app.

app.component.ts:

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

@Component({
    selector: 'my-app',
    providers: [HTTP_PROVIDERS],
    template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}'
})
export class AppComponent { 
    http: Http;
    tasks = [];

    constructor(http: Http) {
        alert(http == null);
        this.http = http;
    }

    getTasks(): void {
        this.http.get('http://localhost:3000/tasks/norender');
            //.map((res: Response) => res.json())

            //it is important to have this subscribe call, since the 
            //request is only made if there is a subscriber 
            .subscribe(res => this.tasks = res);
    }   
}

boot.ts:

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [HTTP_PROVIDERS]);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
        <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            transpiler: 'typescript', 
            typescriptOptions: {emitDecoratorMetadata: true}, 
            packages: {'app': {defaultExtension: 'ts'}} 
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

For what I see in your updated code, you need to uncomment the subscribe since that's the part that triggers the request. — Eric Martinez
– Eric Martinez, Commented Dec 27, 2015 at 2:49
That was it! Thanks @EricMartinez, so it is smart and only makes the request if the result is consumed. Thanks! — Peter Pei Guo
– Peter Pei Guo, Commented Dec 27, 2015 at 2:55
You shouldn't have HTTP_PROVIDERS in bootstrap() and in providers: [...]. Pick one. — Mark Rajcok
– Mark Rajcok, Commented Dec 27, 2015 at 3:06

Yaniv Efraim · Accepted Answer · 2015-12-26 21:17:21Z

4

You should add an Http provider. You have two options:

On bootstrap:

import {HTTP_PROVIDERS} from 'angular2/http';

and:

ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);

On the component using the service:

import {HTTP_PROVIDERS} from 'angular2/http';

@Component({

...

providers: [HTTP_PROVIDERS]

...
})

answered Dec 26, 2015 at 21:17

Yaniv Efraim

6,7219 gold badges56 silver badges98 bronze badges

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

Comments

MatthewScarpino · Accepted Answer · 2015-12-27 03:04:19Z

1

I had a similar problem when I used an old version of the TypeScript compiler. I fixed it by changing the constructor argument from http: Http to @Inject(Http) http: Http. Of course, you need to import Inject to use it.

I'd try using the SystemJS release at https://code.angularjs.org/tools/system.js instead of the release at rawgithub.com.

answered Dec 27, 2015 at 3:04

MatthewScarpino

5,9667 gold badges40 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to make ajax call with angular2/http?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related