Angular 2 - Cannot read property 'get' of undefined (http undefined)

Question

Novice to Angular2 and running into strange issue. When rendering index.html the app.component renders the html part OK, but it fails on data call in user.service.ts - specifically http is undefined (code below).

Browser Error

app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports: [
        BrowserModule,
        HttpModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 

user.service

import { Component, Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { User } from '../models/user';

@Injectable()
export class UserService {
    private user: User;

    constructor(private http: Http) {

    }

    getCurrentUser() {
        return this.http.get('http://jsonplaceholder.typicode.com/posts')
            .map((request: any) => {
                return this.user = {
                    id: 'testID',
                    firstName: 'fname test',
                    lastName: 'lastname Test',
                    displayName: 'display name test'
                }

            });
    }
}

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { UserService } from './services/user.service';
import { User } from './models/user';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    providers: [UserService]
})
export class AppComponent implements OnInit {
    user: User;

    constructor(
        @Inject(UserService) private _userService: UserService) {
    }
    getCurrentUser() {
        this._userService.getCurrentUser()
            .subscribe(user => this.user = user);
    }
    ngOnInit() {
        this.getCurrentUser();
    }
}

system.config

map: {
        // our app is within the app folder
        app: 'public/dist/js',
        // angular bundles
        '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
        '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
        '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
        '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
        // other libraries
        'rxjs': 'node_modules/rxjs'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }  

snippet from package.json

 "devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"@types/jasmine": "^2.5.35",
"angular-cli": "1.0.0-beta.17",
"codelyzer": "1.0.0-beta.0",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.4.1",
"tslint": "^3.15.1",
"gulp": "3.9.1",
"gulp-clean-css": "2.0.13",
"gulp-concat": "2.6.0",
"gulp-plumber": "1.1.0",
"gulp-typescript": "3.0.2",
"gulp-uglify": "2.0.0",
"gulp-tslint": "6.1.2",
"gulp-sourcemaps": "2.1.1",
"systemjs": "0.19.39",
"systemjs-builder": "0.15.32"
}

nodejs version: 6.2.0

npm version: 3.10.8

Any advise would be much appreciated

Answer 1

You need to provide the user service in your app.module and remove the @Inject and the providers entry in the app.component:

app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
//Add your UserService import here

@NgModule({
    imports: [
        BrowserModule,
        HttpModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ UserService ]
})
export class AppModule { }

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { UserService } from './services/user.service';
import { User } from './models/user';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent implements OnInit {
    user: User;

    constructor(
        private _userService: UserService) {
    }
    getCurrentUser() {
        this._userService.getCurrentUser()
            .subscribe(user => this.user = user);
    }
    ngOnInit() {
        this.getCurrentUser();
    }
}

this way, UserService dependencies are managed by the injector and you don't provide the service directly to your component (this behaviour is deprecated or even removed, don't know since final release).

Answer 2

In your app.module.ts, import UserService like this-

import { UserService } from './services/user.service';

Provide it in NgModule like this-

@NgModule({
    imports: [BrowserModule,HttpModule],
    declarations: [ AppComponent ],
    providers: [ UserService ],
    bootstrap:    [ AppComponent ]
})

See if this helps.