title: Unexpected end of JSON input in Http get request from Angular 2 to Codeigniter
body: <p>Angular 2 with Codeigniter Hello World Program running perfectly. But
  I am getting error "Unexpected end of JSON input" while sending Http get request from Angular 2 to Codeigniter Controller "Entry.php"
  Plunker code is at this link:</p>
  
  <p><a href="https://plnkr.co/edit/MHVVkWwFqEggqSI5b6B2?p=info" rel="noreferrer">https://plnkr.co/edit/MHVVkWwFqEggqSI5b6B2?p=info</a></p>
  
  <p>Same code is pasted here also:
     app.module.ts</p>
  
  <pre><code>import { NgModule }            from '@angular/core';
  import { BrowserModule }       from '@angular/platform-browser';
  import { HttpModule } from "@angular/http";
  import { AppComponent }        from './app.component';
  import { EntryService }        from './entry.service';
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpModule
    ],
    declarations: [
      AppComponent
    ],
    exports: [ // export for the DemoModule
      AppComponent
    ],
    providers: [ EntryService], 
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  import { EntryService} from './entry.service';
  
  @Component({  
    selector: 'my-app',
    template: `
        &lt;h3&gt;{{ errorMsg }} &lt;/h3&gt;      
        &lt;ul&gt;
            &lt;li *ngFor="let s of scripts"&gt;{{ s.price }}&lt;/li&gt;
        &lt;/ul&gt;
    `,
  })
  
  class formEntry{  
    constructor(price: number, qty: number){}    
  }
  export class AppComponent implements OnInit{
  
      errorMsg: string;
      data: formEntry;
      constructor(private _entService: EntryService) { }
  
      ngOnInit()
      {
          console.log('In OnInit: ');        
          this._entService.getData()
              .subscribe(data =&gt; this.data = data,
                          resError =&gt; this.errorMsg = resError);            
      }
  }
  </code></pre>
  
  <p>entry.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, Response}  from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/observable/throw';
  
  @Injectable()
  export class EntryService { 
  
       constructor(private _http: Http) { } 
  
       getData(){
  
          let myUrl = 'http://localhost/analy/entry/getData';
          return this._http.get(myUrl)
              .map((res: Response ) =&gt; res.json())
              .catch(this._errorHandler);
        } 
        _errorHandler(error: Response){
            console.error(error);
            return Observable.throw(error || "Server Error");
        }
  }
  </code></pre>
  
  <p>Entry.php</p>
  
  <pre><code>class Entry extends CI_Controller
  {
      function __construct()
      {
          parent::__construct();      
  
          header('Access-Control-Allow-Origin: *');
          header('Access-Control-Allow-Headers: X-Requested-With');
          header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
      }
  
      function getData(){
          $data = array('price' =&gt; 999,
                 'qty' =&gt; 8);                
          $jdata = json_encode($data);                       
          return ($jdata);
      }
  }
  </code></pre>
  
  <p>I am using webpack 2. The code is not working at plnkr but on my system. But it is working perfectly for mydata.json file but giving error for get request to "entry/getData" (from entry.service.ts). 
  getData is method in Entry.php controller.</p>
  
  <p>What can be the possible cause and what is possible solution..???
  Please any one can please help me out to resolve the problem.</p>