Property 'toPromise' does not exist on type 'Observable<Response>' And Parameter 'response' implicity has an 'any' type

Question

This My .service.ts but I've two errors :

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

First : Property 'toPromise' does not exist on type 'Observable'

and Two :Parameter 'response' implicity has an 'any' type.

I imports 'toPromise', 'Response' an 'Observable' but it still not working... How can I fix this please ?

Thanks.

EDIT My 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

It could perhaps cause a problem, that you import Observable from rxjs/Rx. Can you try to import from rxjs/Observable?

EDIT:

Perhaps is this the reason for your problem (a bug in VS): Angular 2 2.0.0-rc.1 Property 'map' does not exist on type 'Observable<Response>' not the same as issue report

To the second error: It looks like you have

"noImplicitAny": true,

in your tsconfig.json. This forces you to give types to everything and it does not use the any-type if non is defined. Ether set noImplicitAny to false or you add a type to the response (any, or Response).

---

Additional note:

Don't use toPromise if not necessary. In your case, you could work with observables without any problems:

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

Now you could simply subscribe to them.