Angular 角度2-无法读取属性'；获取'；未定义的类型（http未定义）

新手到Angular2，遇到了奇怪的问题。呈现index.html时，app.component呈现html部分正常，但在user.service.ts中的数据调用失败-具体而言，http未定义（代码如下）

浏览器错误

应用程序模块.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 { }

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

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

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

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

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

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

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

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

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

用户服务

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

            });
    }
}

应用程序组件.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 { }

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

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

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

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

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

来自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

---

如果您有任何建议，我们将不胜感激。

在您的app.module.ts中，像这样导入用户服务-

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

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

在如下模块中提供它-

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

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

---

查看这是否有帮助。

您需要在app.module中提供用户服务，并删除

app.component中的
@Inject
和
providers
条目：

应用程序模块.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 { }

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

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

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

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

应用程序组件.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 { }

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

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

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

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
依赖项由注入器管理，而您不直接向组件提供服务（这种行为已被弃用，甚至已被删除，自最终版本以来不知道）.
我有相同的代码，唯一的区别是UserService是在AppModule的提供者中定义的，而不是在AppComponent的提供者中定义的