プロパティ 'subscribe'は型 'Observableに存在しません<User> |エラー'。プロパティは、型「エラー」に存在しません「購読」が

Question

I'vは私のログインサービスからサブスクリプションを返すようにしようとして：

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import {User} from '../models/user'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class LoginService { 
    constructor(private http: Http) { } 

    login(username: string, password: string){ 
     if(username && password){ 
     return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => response.json().data as User); 
     } 
     else { 
     return new Error('Credentials not provided'); 
     } 
} 

など、私のコンポーネントでそれを呼び出す：

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { LoginService } from './login.service'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html', 
    providers: [LoginService] 
}) 

export class LoginComponent implements OnInit { 
    model: any = {}; 
    loading = false; 
    returnUrl: string; 

    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private loginService: LoginService) { } 

    ngOnInit() { 
    // reset login status 
    //this.loginService.logout(); 

    // get return url from route parameters or default to '/' 
    //this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; 
    } 

    login() { 
    this.loading = true; 
    console.log(this.loginService.login(this.model.username, this.model.password)); 


    /* .subscribe(
     data => { 
      this.router.navigate([this.returnUrl]); 
     }, 
     error => { 
      console.log(error); 
      this.loading = false; 
     }); */ 
    } 
} 

しかし、観察を印刷の上に私はこの取得：

Observable {_isScalar: false, source: Observable, operator: 
MapOperator}operator: MapOperator {thisArg: undefined, project: ƒ}source: 
Observable_isScalar: false_subscribe: ƒ (responseObserver)arguments: 
(...)caller: (...)length: 1name: ""prototype: {constructor: ƒ}__proto__: ƒ 
()[[FunctionLocation]]: http.es5.js:1187[[Scopes]]: Scopes[3]__proto__: 
Object_isScalar: false__proto__: catch: ƒ _catch(selector)forEach: ƒ (next, 
PromiseCtor)lift: ƒ (operator)map: ƒ map(project, thisArg)subscribe: ƒ 
(observerOrNext, error, complete)toPromise: ƒ 
toPromise(PromiseCtor)Symbol(observable): ƒ()_catch: ƒ 
_catch(selector)_subscribe: ƒ (subscriber)_trySubscribe: ƒ 
(sink)constructor: ƒ Observable(subscribe)__proto__: Object 

をオブザーバオブジェクトのトップレベルではなく、民間のprot内部購読性質があるように思われるのdoesntオブジェクト。私は他の答えで提供されるすべてのソリューションを試しました。ただ、doesntの仕事:(

ここ

は私のパッケージJSONです：

{ 
    "name": "pd-free-angularcli", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@ngui/map": "^0.18.3", 
    "@types/googlemaps": "^3.26.14", 
    "arrive": "^2.3.1", 
    "bootstrap": "^3.3.5", 
    "bootstrap-notify": "^3.1.3", 
    "chartist": "^0.9.4", 
    "core-js": "^2.4.1", 
    "jquery": "^1.12.4", 
    "moment": "^2.18.1", 
    "proxy-polyfill": "^0.1.7", 
    "rxjs": "^5.1.0", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.1.1", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "2.5.45", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.0.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

Answer 1

私はあなたが何かを切り取るかどうかわからないんだけど、あなたはconsole.log

console.log(this.loginService.login(this.model.username, this.model.password)); 

/* .subscribe(
    data => { 

に加入されているように、これが見えます

私は何かをカットしてあなたの問題がここにあると推測しています：

else { 
    return new Error('Credentials not provided'); 
} 

エラーが返されます。観察可能ではありません。これは、それを解決する必要があります

return Observable.throw(new Error('Credentials not provided')); 

Answer 2

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import {User} from '../models/user'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class LoginService { 
    constructor(private http: Http) { } 

    login(username: string, password: string){ 
     if(username && password){ 
     return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => response.json().data as User); 
     } 
     else { 
     return Observable.throw(new Error('Credentials not provided')); <--------- 
     } 
}