ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (PlantDetailComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)

ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { catchError, map, tap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { Plant } from './plant';

@Injectable()
export class PlantService {
  private plantsUrl = 'api/plants';

  constructor(private http: HttpClient) { }

  getPlants(): Observable<Plant[]> {
    return this.http.get<Plant[]>(this.plantsUrl)
      .pipe(
        catchError(this.handleError('getPlants', []))
      );
  }

  getPlant(id: number): Observable<Plant> {
    const url = `${this.plantsUrl}/${id}`;
    return this.http.get<Plant>(url).pipe(
      catchError(this.handleError<Plant>(`getPlant id=${id}`))
    );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }
}

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Plant } from '../plant';
import { PlantService } from '../plant.service';

@Component({
  selector: 'app-plant-detail',
  templateUrl: './plant-detail.component.html',
  styleUrls: ['./plant-detail.component.css']
})
export class PlantDetailComponent implements OnInit {
  plant: Plant;

  constructor(private route: ActivatedRoute,
    private plantService: PlantService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getPlant();

  }

  getPlant(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.plantService.getPlant(id)
      .subscribe(plant => this.plant = plant);
  }

  goBack(): void {
    this.location.back();
  }

}

var express = require("express");
var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'plant_care',
});
var app = express();

app.get("/api/plants", function(req, res) {
  connection.query('SELECT * FROM plant', function(err, rows, fields) {
    if (!err)
      res.send(rows);
    else
      console.log('Error while performing Query.');
  });
});

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  connection.query('SELECT * FROM plant WHERE ID = ' + requestedID, function(err, rows, fields) {
    if (!err)
      res.send(rows);
    else
      console.log('Error while performing Query.');
  });
});

app.listen(3000, function() {
  console.log("Running...");
});

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  connection.query('SELECT * FROM plant WHERE ID = ' + requestedID, function(err, rows, fields) {
    if (!err)
      res.send(rows[0]);
    else
      console.log('Error while performing Query:n' + err);
  });
});