Angular 2 ES6 Inject Http

Question

I am trying to figure out how to properly inject http into my class using es6. When I use @inject I get an error saying inject is not defined. Am I missing something else I must import for inject to work here?

import 'zone.js/lib/browser/zone-microtask';
import 'reflect-metadata';
import 'babel-polyfill';

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {Http, Headers} from 'angular2/http';

import {Component, View, Input} from 'angular2/core';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES} from 'angular2/router';


@Component({
    selector: 'test-app',
    template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
@inject('Http')
export class TestApp
{
    constructor(http)
    {
        this.name = 'Allencoded';
        this.http = http;
    }

    sayMyName()
    {
        console.log('My Name is ', this.name);
        console.log(this.http);
    }
}

OP, its worth trying gitter https://gitter.im/angular/angular as well — Angular University, Jan 14 '16 at 21:55
That's because `@inject` is not defined, literally. It is `@Inject` (camel-cased, as other ng2 decorators). And it should be imported (as other ng2 decorators). — Estus Flask, Jan 15 '16 at 12:08
I tried that still didn't work. I tried importing it then using `@Inject` and also tried `@inject`. Both didn't work — allencoded, Jan 15 '16 at 14:28

score 3 · Accepted Answer · edited May 23 '17 at 12:17

This is how I got it to finally work:

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

export class TestApp
{
    static get parameters() {
        return [[Http]];
    }

    constructor(http)
    {
        this.name = 'Allen';
        this.http = http;
    }
}

bootstrap(TestApp, [
  HTTP_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

Taken from: How to Inject Angular2 Http service into es6/7 Class?

Angular 2 ES6 Inject Http

1 Answers1

Linked