Angular 2 - 无法读取未定义的属性 'get' (http undefined)

Question

Angular2 的新手遇到了奇怪的问题。当呈现 index.html 时，app.component 呈现 html 部分正常，但它在 user.service.ts 中的数据调用失败 - 特别是 http 未定义(下面的代码)。

浏览器错误

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 { }

ma​​in.ts

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

用户服务

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();
    }
}

系统配置

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'
        }
    }  

来自 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版本:6.2.0

npm 版本:3.10.8

任何建议将不胜感激

Answer 1

您需要在您的 app.module 中提供用户服务，并移除 app.component 中的 @Inject 和 providers 条目:

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();
    }
}

这样，UserService 依赖项由注入(inject)器管理，您不会直接向您的组件提供服务(这种行为已被弃用甚至被删除，不知道 从最终版本开始)。