プロパティ「toPromiseは、」タイプ「観察可能<Response>」上に存在しないと、パラメータ「応答」暗黙的には、「あらゆる」タイプ

Question

このマイ.service.tsを持っていますが、私は2つのエラーました：

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

import 'rxjs/add/operator/toPromise'; 

import { Product } from './Product'; 

@Injectable() 
export class ProductService { 

    private headers = new Headers({ 'Content-Type': 'application/json' }); 
    private productsUrl = 'app/products'; // URL to web api 

    constructor(private http: Http) { } 

    getProducts(): Promise<Product[]> { 
     return this.http.get(this.productsUrl) 
      .toPromise() //<--- FIRST 
      .then(response => response.json().data as Product[]) //<--- TWO 
      .catch(this.handleError); 
    } 

    getProduct(id: number): Promise<Product> { 
     return this.getProducts() 
      .then(products => products.find(product => product.id === id)); 
    } 

    delete(id: number): Promise<void> { 
     const url = `${this.productsUrl}/${id}`; 
     return this.http.delete(url, { headers: this.headers }) 
      .toPromise() 
      .then(() => null) 
      .catch(this.handleError); 
    } 

    create(wording: string): Promise<Product> { 
     return this.http 
      .post(this.productsUrl, JSON.stringify({ wording: wording }), { headers: this.headers }) 
      .toPromise() 
      .then(res => res.json().data) 
      .catch(this.handleError); 
    } 

    createFull(product: Product): Promise<Product> { 
     return this.http 
      .post(this.productsUrl, JSON.stringify({ product: product }), { headers: this.headers }) 
      .toPromise() 
      .then(res => res.json().data) 
      .catch(this.handleError); 
    } 

    update(product: Product): Promise<Product> { 
     const url = `${this.productsUrl}/${product.id}`; 
     return this.http 
      .put(url, JSON.stringify(product), { headers: this.headers }) 
      .toPromise() 
      .then(() => product) 
      .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 

最初に：プロパティ 'toPromise'はタイプ 'Observable'には存在しません

2つ：パラメータ 'response' implicityに 'any'タイプがあります。

'toPromise'、 'Response'、 'Observable'をインポートしましたが、まだ動作していません... どうすればこの問題を解決できますか？

ありがとうございました。

EDITマイsystemjs.config.js：

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'lib-npm/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     main: 'app/main.js', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     api : { defaultExtension: 'js' }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    if (!global.noBootstrap) { bootstrap(); } 

    // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this) 
    function bootstrap() { 
     console.log('Auto-bootstrapping'); 

     // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html 
     System.set(System.normalizeSync('app/main.ts'), System.newModule({})); 

     // bootstrap and launch the app (equivalent to standard main.ts) 
     Promise.all([ 
     System.import('@angular/platform-browser-dynamic'), 
     getAppModule() 
     ]) 
     .then(function (imports) { 
      var platform = imports[0]; 
      var app = imports[1]; 
      platform.platformBrowserDynamic().bootstrapModule(app.AppModule); 
     }) 
     .catch(function (err) { console.error(err); }); 
    } 

    // Import AppModule or make the default AppModule if there isn't one 
    // returns a promise for the AppModule 
    function getAppModule() { 
     if (global.noAppModule) { 
      return makeAppModule(); 
     } 
     return System.import('app/app.module').catch(makeAppModule) 
    } 

    function makeAppModule() { 
     console.log('No AppModule; making a bare-bones, default AppModule'); 

     return Promise.all([ 
     System.import('@angular/core'), 
     System.import('@angular/platform-browser'), 
     System.import('app/app.component') 
     ]) 
     .then(function (imports) { 

      var core = imports[0]; 
      var browser = imports[1]; 
      var appComp = imports[2].AppComponent; 

      var AppModule = function() { } 

      AppModule.annotations = [ 
      new core.NgModule({ 
       imports: [browser.BrowserModule], 
       declarations: [appComp], 
       bootstrap: [appComp] 
      }) 
      ] 
      return { AppModule: AppModule }; 
     }) 
    } 
})(this); 

Answer 1

それはおそらくあなたがrxjs/Rxから観察可能なインポートし、問題を引き起こす可能性があります。 rxjs/Observableからインポートできますか？

EDIT：2番目のエラーへAngular 2 2.0.0-rc.1 Property 'map' does not exist on type 'Observable<Response>' not the same as issue report

：

おそらくこれは、あなたの問題（VSのバグ）の理由であるそれはあなたが

"noImplicitAny": true, 

中を持っているように見えますあなたのtsconfig.jsonこれにより、すべてに型を渡すことが強制され、非定義の場合にはany型は使用されません。 Ether set noImplicitAnyをfalseに設定するか、応答にタイプを追加します（anyまたはResponse）。

---

追加注：

必要がない場合toPromise使用しないでください。あなたのケースでは、問題なく観察可能なものを扱うことができます：

return this.http.get(this.productsUrl) 
     .map(response => response.json().data as Product[]); 

これで簡単にサブスクライブすることができます。