Question

新手到Angular2并遇到了奇怪的问题。当渲染index.html时，app.component呈现html部分OK，但是在 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 { }

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

来自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中提供用户服务，并移除@Inject中的providers和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();
    }
}

这样，UserService依赖项由注入器管理，并且您不直接向组件提供服务（此行为已弃用甚至已删除，不知道，因为最后发布）。

Answer 2

在app.module.ts中，像这样导入UserService -

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

像NgModule一样提供它 -

TREE_UNDEFINED = -2

看看这是否有帮助。

Angular 2 - 无法读取属性＆＃39; get＆＃39;未定义的（http未定义）

2 个答案: