Angular 2 - Nie można odczytać właściwości 'get' z undefined (http undefined)

Question

Początkujący do Angular2 i biegnący do dziwnego problemu. Podczas renderowania pliku index.html element app.component renderuje część html, ale kończy się niepowodzeniem podczas wywoływania danych w user.service.ts - w szczególności http jest niezdefiniowany (kod poniżej).

Przeglądarka błędach

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 z 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 wersji: Wersja 6.2.0

npm: 3.10.8

Każda rada będzie mile widziane

Answer 1

Trzeba zapewnić obsługę użytkownika w swojej app.module i wyjąć @Inject a wejściem providers w 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(); 
    } 
} 

w ten sposób, UserService zależności są zarządzane przez wtryskiwacz i nie zapewniasz usługi bezpośrednio do komponentu (to zachowanie jest przestarzałe lub nawet usunięte, nie wiem od ostatecznego wydania).

Answer 2

W swoim app.module.ts, import UserService tak -

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

Podaj w NgModule w ten sposób -

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

Sprawdź, czy to pomaga.