title: Angular2 Express route http.get(api + :id) call will not return JSON
body: <p>The issue I'm facing is that when I attempt to call/return a JSON object  via</p>
  
  <pre><code>import {Injectable} from '@angular/core';    
  import { Headers, Http, Response } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import {Item} from "../models/item";
  
  @Injectable()
  export class ItemService {
  
      private ItemsUrl = 'api/Items';  // URL to web api
  
      constructor(private http: Http) { }
  
      getItems(): Promise&lt;Item[]&gt; {
          return this.http.get(this.ItemsUrl)
              .toPromise()
              .then(response =&gt; response.json())
              .catch(this.handleError);
      }
  
      getItem(id: string) {
          return this.http.get(this.ItemsUrl + '/' + id)
              .toPromise()
              .then(response =&gt; response.json())
              .catch(this.handleError);
      }
  </code></pre>
  
  <p>I receive an error message 
  <a href="https://i.stack.imgur.com/2b8fc.png" rel="nofollow noreferrer">error message received from http.get request.</a></p>
  
  <p>The odd thing is that if I make a call to the api requesting all data from items, it works?</p>
  
  <pre><code> return this.http.get(this.ItemsUrl)
  </code></pre>
  
  <p>but if I attempt to call a specific object via its _id, I receive the above error.</p>
  
  <p>Also, I am able to access the individual members for a different api (contacts)</p>
  
  <p><strong>Contact.service.ts</strong></p>
  
  <pre><code>import {Injectable} from '@angular/core';   
  import { Headers, Http, Response } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import {Contact} from "../models/contact";
  
  @Injectable()
  export class ContactService {
  
      private ContactsUrl = 'api/Contacts';  // URL to web api
  
      constructor(private http: Http) { }
  
      getContacts(): Promise&lt;Contact[]&gt; {
          return this.http.get(this.ContactsUrl)
              .toPromise()
              .then(response =&gt; response.json())
              .catch(this.handleError);
      }
  
      getContact(id: string) {
          return this.http.get(this.ContactsUrl + '/' + id)
              .toPromise()
              .then(response =&gt; response.json())
              .catch(this.handleError);
      }
  </code></pre>
  
  <p>After researching this issue, I think the Angular code is correct and my issue is related to the routes Express uses.</p>
  
  <p><strong>Server.ts</strong>   </p>
  
  <pre><code>    import express = require('express');
      import BaseRoutes = require("./config/routes/Routes");
      import bodyParser = require("body-parser");
  
      import path = require('path');
      var port: number = process.env.PORT || 3000;
      var env:string = process.env.NODE_ENV || 'developement';
  
      var app = express();
  
      app.set('port', port);
  
      app.use('/app', express.static(path.resolve(__dirname, '../client/app')));
      app.use('/libs', express.static(path.resolve(__dirname, '../client/libs')));
  
      // for system.js to work. Can be removed if bundling.
      app.use(express.static(path.resolve(__dirname, '../client')));
      app.use(express.static(path.resolve(__dirname, '../../node_modules')));
  
      app.use(bodyParser.json());
      app.use('/api', new BaseRoutes().routes);
  
      var renderIndex = (req: express.Request, res: express.Response) =&gt; {
          res.sendFile(path.resolve(__dirname, '../client/index.html'));
      }
  
      app.get('/*', renderIndex);
  
      if(env === 'developement'){
          app.use(function(err, req: express.Request, res: express.Response, next: express.NextFunction) {
              res.status(err.status || 500);
              res.json({
                  error: err,
                  message: err.message
              });
          });
      }
  </code></pre>
  
  <p><strong>Routes.ts</strong></p>
  
  <pre><code>import express = require('express');
  import path = require('path');
  
  import ContactRoutes = require('../routes/ContactRoutes');
  import ItemRoutes = require('../routes/ItemRoutes');
  var app = express();
  
  class Routes {
  
      get routes() {
               app.use("/", new ItemRoutes().routes); 
              app.use("/", new ContactRoutes().routes);
  
  
          return app;
      }
  }
  export = Routes;
  </code></pre>
  
  <p><strong>item-detail.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;Item&lt;/h1&gt;
   &lt;div *ngIf="item" class="form-horizontal"&gt;
      &lt;h2&gt;{{item.itemName}} - Item Details&lt;/h2&gt;
  
      &lt;h3&gt;{{item.rate}}- Basic Info&lt;/h3&gt;
      &lt;div class="form-group"&gt;
          &lt;div *ngIf="!newItem"&gt;
              &lt;label class="col-sm-2 control-label"&gt;id: &lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                  {{item._id}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>ItemRoutes.ts</strong></p>
  
  <pre><code>import express = require("express");
  import ItemController = require("./../../controllers/ItemController");
  
  var router = express.Router();
  class ItemRoutes {
      private _itemController: ItemController;
  
      constructor () {
          this._itemController = new ItemController();
      }
      get routes () {
          var controller = this._itemController;
  
          router.get("/Items", controller.retrieve);
          router.post("/Items", controller.create);
          router.put("/Items/:_id", controller.update);
          router.get("/Items/:_id", controller.findById);
          router.delete("/Items/:_id", controller.delete);
  
          return router;
      }
  
  
  }
  
  Object.seal(ItemRoutes);
  export = ItemRoutes;
  </code></pre>