title: Property 'toPromise' does not exist on type 'Observable<Response>' And Parameter 'response' implicity has an 'any' type
body: <p>This My .service.ts but I've two errors : </p>
  
  <pre><code>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&lt;Product[]&gt; {
          return this.http.get(this.productsUrl)
              .toPromise() //&lt;--- FIRST
              .then(response =&gt; response.json().data as Product[]) //&lt;--- TWO
              .catch(this.handleError);
      }
  
      getProduct(id: number): Promise&lt;Product&gt; {
          return this.getProducts()
              .then(products =&gt; products.find(product =&gt; product.id === id));
      }
  
      delete(id: number): Promise&lt;void&gt; {
          const url = `${this.productsUrl}/${id}`;
          return this.http.delete(url, { headers: this.headers })
              .toPromise()
              .then(() =&gt; null)
              .catch(this.handleError);
      }
  
      create(wording: string): Promise&lt;Product&gt; {
          return this.http
              .post(this.productsUrl, JSON.stringify({ wording: wording  }), { headers: this.headers })
              .toPromise()
              .then(res =&gt; res.json().data)
              .catch(this.handleError);
      } 
  
      createFull(product: Product): Promise&lt;Product&gt; {
          return this.http
              .post(this.productsUrl, JSON.stringify({ product: product }), { headers: this.headers })
              .toPromise()
              .then(res =&gt; res.json().data)
              .catch(this.handleError);
      }
  
      update(product: Product): Promise&lt;Product&gt; {
          const url = `${this.productsUrl}/${product.id}`;
          return this.http
              .put(url, JSON.stringify(product), { headers: this.headers })
              .toPromise()
              .then(() =&gt; product)
              .catch(this.handleError);
      }
  
      private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error); // for demo purposes only
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p>First : Property 'toPromise' does not exist on type 'Observable'</p>
  
  <p>and Two :Parameter 'response' implicity has an 'any' type. </p>
  
  <p>I imports 'toPromise', 'Response' an 'Observable' but it still not working...
  How can I fix this please ? </p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT</strong> My systemjs.config.js :</p>
  
  <pre><code>(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);
  </code></pre>