Francois Borgies Francois Borgies - 1 year ago 151
Javascript Question

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

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

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

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

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

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

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

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

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 ?


EDIT My systemjs.config.js :

(function (global) {
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() {

// 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)
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
.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([
.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 };

Answer Source

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download