Angular 2 error when injecting Http

Question

I am trying to port a small Angular 1 app to Angular 2 and so far I've had issues with Http that I couldn't resolve. As soon as I inject HTTP_PROVIDERS, I get the following error:

Uncaught SyntaxError: Unexpected token <    Evaluating
http://localhost:3000/angular2/http     Error loading
http://localhost:3000/app/main.js

Here's the code for my main.ts:

import {bootstrap} from 'angular2/platform/browser';
import {AppConverter} from './app.converter';
import {CurrencyService} from './services/service.currencies';
import {RippleService} from './services/service.ripple';
import {HTTP_PROVIDERS, Http} from 'angular2/http';

bootstrap(AppConverter, [CurrencyService, HTTP_PROVIDERS, RippleService]);

And here's the service where I tried to use it, although it's commented for now:

import {Http} from 'angular2/http';
import {Inject, Injectable} from 'angular2/core';
@Injectable()
export class RippleService {
    requestUrl: string= null;
    constructor(url: string) // public httpService:Http, url: string){ 
        this.requestUrl = url;
    }
}

If I remove HTTP_PROVIDERS from main.ts, the error disappears and my app displays fine.But ofcourse there is no http service. Either it's a bug in Angular, or I'm not doing this right (I assume it's #2).

I am using Angular 2.0.0 beta 6

@Sasxa I added that and it works, thanks! In all the tutorials I've read, there was never mention of that (not even in the official Angular 2 docs)... — gen, Feb 13 '16 at 23:28

score 1 · Accepted Answer · answered Feb 13 '16 at 23:38

Http is a separate module (not included in default bundle), so you need to include it in your main html file:

<script src="https://code.angularjs.org/2.0.0-beta.6/http.dev.js"></script>

You can find more information at official docs, and here's the example plunker.

score -2 · Answer 2 · answered Feb 13 '16 at 23:38

-2

As Sasxa pointed out, turns out I only needed to add the following to my index.html file:

<script src="node_modules/angular2/bundles/http.dev.js"></script>

answered Feb 13 '16 at 23:38

gen

19
5

@sasxa already posted the same answer then why you fell need to post the same answer ? your accepted sign shows answer is helpful no need to post the same answer again. – Pardeep Jain Feb 14 '16 at 03:41
I posted my answer before @sasxa, but I accepted his after he posted it. Stuff happens. Why the downvote? – gen Feb 16 '16 at 01:58
but as according to displayed time interval you answered after @sexsa's answer. nd one thing more i did't downvote your answer i had just post comment. its community members who downvote your answer. – Pardeep Jain Feb 16 '16 at 04:37

Angular 2 error when injecting Http

2 Answers2