title: Angular 2 : EXCEPTION: Unexpected token < in JSON at position 0
body: <p>I'm trying to implement a REST API into my angular 2 code but i have problem with getting the data from express by angular</p>
  
  <p>When i remove the Angular component there is no error so most probably it's causing the problem. i also can access the data by server route <code>http://localhost:3001/task</code> so data is recived by express </p>
  
  <p>This is my <code>server.js</code> </p>
  
  <pre><code>        'use strict';
  const express = require('express');
  const app = express();
  const jwt = require('express-jwt');
  const cors = require('cors');
  const bodyParser = require('body-parser');
  const multer = require('multer');
  const path = require('path');
  
  var tasks = require('./routes/tasks');
  
  var router = express.Router();
  var mongojs = require('mongojs');
  
  app.use('/tasks', tasks);
  
  
  
  // Set Static Folder
  app.use(express.static(path.join(__dirname, 'client')));
  
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(cors());
  
  
  const authCheck = jwt({
    secret: new Buffer('0u33qUTwmPD-MFf56yqJ2DeHuQncgEeR790T3Ke1TX3R5R5sylVfUNlHWyqQS4Al', 'base64'),
    audience: 'PBNaD26w0HdAinA5QFSyABjWZNrZSx9M'
  });
  
  
  
  
  const upload = multer({
    dest: 'uploads/',
    storage: multer.diskStorage({
      filename: (req, file, cb) =&gt; {
        let ext = path.extname(file.originalname);
        cb(null, `${Math.random().toString(36).substring(7)}${ext}`);
      }
    })
  });
  
  app.post('/upload', upload.any(), (req, res) =&gt; {
    res.json(req.files.map(file =&gt; {
      let ext = path.extname(file.originalname);
      return {
        originalName: file.originalname,
        filename: file.filename
      }
    }));
  });
  
  app.get('/api/deals/public', (req, res)=&gt;{
    let deals = [
    {
      id: 12231,
      name: 'Playstation 4 500GB Console',
      description: 'The Playstation 4 is the next gen console to own. With the best games and online experience.',
      originalPrice: 399.99,
      salePrice: 299.99
    },
    {
      id: 12234,
      name: 'Galaxy Note 7',
      description: 'The Note 7 has been fixed and will no longer explode. Get it an amazing price!',
      originalPrice: 899.99,
      salePrice: 499.99
    },
    {
      id: 12245,
      name: 'Macbook Pro 2016',
      description: 'The Macbook Pro is the de-facto standard for best in breed mobile computing.',
      originalPrice: 2199.99,
      salePrice: 1999.99
    },
    {
      id: 12267,
      name: 'Amazon Echo',
      description: 'Turn your home into a smart home with Amazon Echo. Just say the word and Echo will do it.',
      originalPrice: 179.99,
      salePrice: 129.99
    },
    {
      id: 12288,
      name: 'Nest Outdoor Camera',
      description: 'The Nest Outdoor camera records and keeps track of events outside your home 24/7.',
      originalPrice: 199.99,
      salePrice: 149.99
    },
    {
      id: 12290,
      name: 'GoPro 4',
      description: 'Record yourself in first person 24/7 with the GoPro 4. Show everyone how exciting your life is.',
      originalPrice: 299.99,
      salePrice: 199.99
    },
    ];
    res.json(deals);
  })
  
  app.get('/api/deals/private', authCheck, (req,res)=&gt;{
    let deals = [
    {
      id: 14423,
      name: 'Tesla S',
      description: 'Ride in style and say goodbye to paying for gas. The Tesla S is the car of the future.',
      originalPrice: 90000.00,
      salePrice: 75000.00
    },
    {
      id: 14553,
      name: 'DJI Phantom 4',
      description: 'The Drone revolution is here. Take to the skies with the DJI Phantom 4.',
      originalPrice: 1299.99,
      salePrice: 749.99
    },
    {
      id: 15900,
      name: 'iPhone 7 - Jet Black',
      description: 'Get the latest and greatest iPhone in the limited edition jet black.',
      originalPrice: 899.99,
      salePrice: 799.99
    },
    {
      id: 16000,
      name: '70" Samsung 4K HDR TV',
      description: 'Watch as if you were there with the latest innovations including 4K and HDR.',
      originalPrice: 2999.99,
      salePrice: 2499.99
    },
    {
      id: 17423,
      name: 'Canon t8i DSLR',
      description: 'Capture life\'s moments with the amazing Canon t8i DSLR',
      originalPrice: 999.99,
      salePrice: 549.99
    },
    {
      id: 17423,
      name: 'Xbox One S',
      description: 'Get the latest Xbox and play the best first party games including Gears of War and Forza.',
      originalPrice: 299.99,
      salePrice: 279.99
    },
    ];
    res.json(deals);
  })
  
  
  app.listen(3001);
  console.log('Listening on localhost:3001');
  </code></pre>
  
  <p>tasks.js </p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  var mongojs = require('mongojs');
  var db = mongojs('mongodb://mojtaba:123456@ds129038.mlab.com:29038/mytasklist_mojtaba', ['tasks']);
  
  // Get All Tasks
  router.get('/tasks', function(req, res, next){
      db.tasks.find(function(err, tasks){
          if(err){
              res.send(err);
          }
          res.json(tasks);
      });
  });
  
  module.exports = router;
  </code></pre>
  
  <p><strong>Angular 2</strong> </p>
  
  <p>task.component.ts :</p>
  
  <pre><code>    import { Component } from '@angular/core';
      import {TaskService} from './task.service';
      import {Task} from '../../Task';
  
  
      @Component({
        selector: 'tasks-component',
        templateUrl: 'tasks.component.html'
      })
  
      export class TasksComponent {
        tasks: Task[];
        title: string;
  
        constructor(private taskService:TaskService){
          this.taskService.getTasks()
            .subscribe(tasks =&gt; {
              this.tasks = tasks;
            });
        }
  
        addTask(event){
          event.preventDefault();
          var newTask = {
            title: this.title,
            isDone: false
          }
  
          this.taskService.addTask(newTask)
            .subscribe(task =&gt; {
              this.tasks.push(task);
              this.title = '';
            });
        }
      }
  }
  </code></pre>
  
  <p>task.service.ts :</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Http, Headers} from '@angular/http';
  import 'rxjs/add/operator/map';
  
  
  @Injectable()
  export class TaskService{
  
  
    constructor(private http:Http){
      console.log('Task Service Initialized...');
    }
    /*
     getTasks(){
     console.log('get tasks works');
     return this.http.get('/tasks')
     .map(res =&gt; res.json());
     }
  
     */
    getTasks(){
      return this.http.get('/tasks')
        .map(res =&gt; res.json());
    }
  }
  </code></pre>
  
  <p><strong>Errors</strong> 
  <a href="https://i.stack.imgur.com/3WBaK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3WBaK.jpg" alt="enter image description here"></a></p>
  
  <p>I tried to send JSON instead of html to client but it doesn't work. so what should i do? </p>