Typescript Error TS2339: Property 'project' does not exist on type '{}'

Issue

Hitting this old issue in Angular 2 RC1.. Very frustrating stuff.. has anyone go any idea what I can do here to make this compile..

The line thats causing the error is :

  this.project = res.project;

Here is my component:

            import {Component} from '@angular/core';
            import {ProjectsMainApi} from "../../../services/projects-main";
            import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

            declare var jQuery: any;

            @Component({
                selector: 'projects',
                templateUrl: './app/components/Projects/details/project-single.html',
                directives: [ROUTER_DIRECTIVES]
            })

            export class ProjectDetailsComponent {
                project: Object = {};
                constructor(private _api: ProjectsMainApi, private _params: RouteParams) {
                    this._api.getSinglePortfolio(_params.get("id")).then(
                        (res) => {
                            this.project = res.project;
                        },
                        (error) => {
                            console.error(error);
                        }
                    )
                }
            }

and my service is as follows:

            import {Http, Headers, Response} from "@angular/http"
            import {Injectable} from "@angular/core"
            import {IProjectsMain, ISingleProject} from "../interfaces/AvailableInterfaces"
            import 'rxjs/Rx';
            import {Observable} from 'rxjs/Observable';
            import {Observer} from 'rxjs/Observer';
            import 'rxjs/add/operator/share';
            import 'rxjs/add/operator/map';

            @Injectable()
            export class ProjectsMainApi {
                apiUrl: string = "http://www.example.org/api/projects";
                headers: Headers = new Headers;
                project$: Observable<IProjectsMain[]>;
                private _ProjectsMainObserver: Observer<IProjectsMain[]>;
                private _dataStore: {
                    project: IProjectsMain[]
                };

                constructor(private _http: Http) {
                    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
                    this.headers.append('X-Requested-With', 'XMLHttpRequest');
                    this.project$ = new Observable<IProjectsMain[]>(observer => this._ProjectsMainObserver = observer).share();
                    this._dataStore = { project: [] };
                }

                public getProjectsMain() {
                    this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {
                        this._dataStore.project = data.project;
                        this._ProjectsMainObserver.next(this._dataStore.project);
                    }, error => console.log('Could not load projects.'),
                        () => "done");
                }

                public getSinglePortfolio(id) {
                    console.log("the id is" + id);
                    return new Promise((resolve, reject) => {
                        this._http.get(this.apiUrl + "/" + id).map((res: Response) => res.json()).subscribe(
                            (res) => {
                                //console.log(res);
                                resolve(res);
                            }, (error) => {
                                reject(error);
                            }
                            );
                    })
                }
            }

and the function being called in this component is getSinglePortfolio(id)

and the jason

        {"project":[{"id":1,"title":"fdgdfgdfg","slug":"sdfgsdfgsdfg" },   {"id":2,"title":"fdgdfgdfg","slug":"sdfgsdfgsdfg" }]}

Solution

I think that it is typescript compiler error.
You could define custom interface for that:

import {Component} from '@angular/core';
import {ProjectsMainApi} from "../../../services/projects-main";
import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

declare var jQuery: any;

interface ProjectResult {
  project: Object
}

@Component({
...

and then specify type for res parameter:

 this._api.getSinglePortfolio(_params.get("id")).then(
  (res: ProjectResult ) => {
     this.project = res.project;
  },
  (error) => {
     console.error(error);
  }
)

Full component code:

import {Component} from '@angular/core';
import {ProjectsMainApi} from "../../../services/projects-main";
import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

declare var jQuery: any;

interface ProjectResult {
  project: Object
}

@Component({
    selector: 'projects',
    templateUrl: './app/components/Projects/details/project-single.html',
    directives: [ROUTER_DIRECTIVES]
})

export class ProjectDetailsComponent {
    project: Object = {};
    constructor(private _api: ProjectsMainApi, private _params: RouteParams) {
        this._api.getSinglePortfolio(_params.get("id")).then(
            (res: ProjectResult) => {
                this.project = res.project;
            },
            (error) => {
                console.error(error);
            }
        )
    }
}

Answered By – yurzui

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.