Angular 2 - Unable to read the 'get' property from undefined (http undefined)

Question

Starting to Angular2 and running into a weird problem. When rendering index.html, app.component displays the html part in order, but it does not work when calling user.service.ts data, namely http 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' } } 

fragment 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

version for npm: 3.10.8

Any recommendations would be highly appreciated.

Answer 1

You need to provide a custom service in your .module application and delete the @Inject and providers entry in 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(); } } 

thus, the dependencies of the UserService controlled by the injector, and you do not provide the service directly to your component (this behavior is outdated or even deleted, it is not known after the final version).

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 that helps.