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

Question

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" }]}

Answer 1

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