javascript - MEAN app with angular 2 error: Cannot read property _id of undefined -

i building application first time store, update, view , delete client profiles. followed angular tour of heroes build basic app , pieced mongodb , express portions around net.

i getting error in browser console when attempt delete client profile -

error typeerror: cannot read property '_id' of undefined @ clientprofilecomp.webpackjsonp.../../../../../src/app/components/clientprofile.component.ts.clientprofilecomp.delete (clientprofile.component.ts:53)... (etc).

i have confirmed using postman express routing working intended. able all/create clients @ /api/clients, get, put , delete /api/clients/:_id (where _id autogenerated id each entry).

i believe problem in 1 of component files, error occurs when attempt delete or view specific client detail, causes type of error entirely (casterror). problem began when attempted remove mentions of clientprofile: clientprofile[]; (or hero in case of tutorial) no longer importing details client.ts (hero.ts) since using mongoose schema instead, , not believe should importing schema front-end angular.

here delete section of clientprofile.service.ts:

delete(_id: number): promise<void>  {     const url = `${this.clientprofilesurl}/${_id}`;     return this.http.delete(url, {headers: this.headers}).topromise()     .then(() => null).catch(this.handleerror); } 

and here clientprofile.component.ts requested (the source of problem being replaced instances of clientprofile: clientprofile; clientprofile: any; without knowing doing) note commented out import statement.

import { component, oninit } '@angular/core'; import { router } '@angular/router';  //import { clientprofile } '../old/clientprofile'; import { clientprofileservice } '../services/clientprofile.service';  @component({ selector: 'app-clientprofile', templateurl: '../views/clientprofile.component.html', styleurls: [ '../styles/clientprofile.component.css' ] })  export class clientprofilecomp implements oninit { selectedclientprofile: any; clientprofiles: = []; clientprofile: any;  constructor(     private clientprofileservice: clientprofileservice,     private router: router ) { }  gotodetail(): void {     this.router.navigate(['/detail', this.selectedclientprofile._id]); }  getclientprofiles(): void {     this.clientprofileservice.getclientprofiles().then(clientprofiles => {         this.clientprofiles = clientprofiles;     }); }  ngoninit(): void {     this.getclientprofiles(); }  onselect(clientprofile: any): void {     this.selectedclientprofile = clientprofile; }  add(name: string, address: string): void {     name = name.trim();     address = address.trim();     if (!name) { return; }     this.clientprofileservice.create(name, address).then(clientprofile => {         this.clientprofiles.push(clientprofile);             this.selectedclientprofile = null;     this.getclientprofiles();     }); }  delete(clientprofile: any): void {     this.clientprofileservice.delete(clientprofile._id).then(() => {         this.clientprofiles = this.clientprofiles.filter(h => h !==  clientprofile);         if (this.selectedclientprofile === clientprofile) { this.selectedclientprofile = null; }     }); } } 

i have been poring on day, , have read lot of similar posts here - of solutions don't seem apply case. if point me in right direction, i'd grateful. if more code needed explain i'm trying gladly post it.

based on error message seems error here:

this.router.navigate(['/detail', this.selectedclientprofile._id]) 

it appears set in onselect , there several places in code setting this.selectedclientprofile null. best place look.

if you'd create plunker demonstrates issue, @ further.

as side note, using promises instead of more common observables. if want change on using observables, have complete example of crud (create, read, update, , delete) operations here: https://github.com/deborahk/angular2-reactiveforms in apm folder.