title: Angular 2 Uncaught SyntaxError: Unexpected Token <
body: <p>I've seen that this problem is fairly common across Angular 2, but I haven't seen anything that helps with my particular situation.</p>
  
  <p>Specifically, I'm creating an app that's pulling data from an API (which requires an API key), where the results are specifically in XML format. What I'm trying to do is call the API when a user enters search parameters, have the API return the results, and then eventually display the results on the same screen. </p>
  
  <p>However, I keep encountering the same "Unexpected token &lt;" error, where the source of the error is on the URL of the API itself. I have my suspicion that the problem is stemming from the fact that I'm attempting to return the body as JSON, but I've never experienced this problem before so I was hoping the community could help! </p>
  
  <p>Here's my Service and Component code below:</p>
  
  <p><strong>search-bar.component.ts</strong></p>
  
  <pre><code>import { Component, Output, Input, EventEmitter } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { NgModel } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';
  
  import { Search } from './search';
  import { ZillowSearchService } from './zillow-search.service';
  
  
  @Component({
      moduleId: module.id,
      selector: 'search-bar',
      templateUrl: `search-bar.component.html`,
      styles: [
          `input {
              width: 50%;
              margin-left: 25%;
              margin-top: 15%;
              color: black;
              height: 40px;
          }
          button {
              border-radius: 5px;
              margin-top: 5%;
              margin-left: 45%;
          }
          `
      ]
  })
  export class SearchBarComponent {
      getSearchResults: string;
      model = new Search("");
      constructor( private zillowSearchService: ZillowSearchService) {}
      private sub: any;
      public state: string = "" ;
      data: string;
  
     onSubmit(){
          this.zillowSearchService.searchZillow("New Mexico")
                  .subscribe(
                  data =&gt; console.log(data),
                  error =&gt; console.log("Error: " + error)
                  );
      }
  }
  </code></pre>
  
  <p><strong>zillow-search.service.ts</strong>:</p>
  
  <pre><code>import { Inject, Injectable } from '@angular/core';
  import { Http, Headers, Response, Jsonp } from '@angular/http';
  import { Observable } from 'rxjs/Rx';
  import '../rxjs-operators';
  
  import { AppConfig } from './app-config';
  import { Search } from './search';
  
  let api = AppConfig.baseUrls.api;
  let url = AppConfig.baseUrls.base;
  
  @Injectable() 
  export class ZillowSearchService {
    public state: string;
    constructor ( @Inject(Jsonp) private jsonp: Jsonp) {
       //this.http = http;
    }
    protected results: any;
  
    searchZillow(statevar: any) {
      console.log("Before" + statevar);
      var queryString = url + `?zws-id=${api}&amp;state=${statevar}&amp;callback=JSONP_CALLBACK`;
  
      return this.jsonp 
            .get(queryString, new Headers({ "Content-type":
  "application/xml", "Accept": "application/xml", 
            "Access-Control-Allow-Origin": "*" }))
            .map((res: Response) =&gt; res.json())
            //.map(res =&gt; console.log("TEST"));
            //.map((res) =&gt; {
              //return
            //});;
      }
    }
  </code></pre>
  
  <p>For some additional details, looking into the Console and Network, I can see that the "type" is listed as script and the initiator is http.umd.js, where it points me to BrowserJsonp.send (if this helps provider any context at all).</p>
  
  <p>Let me know if you'd like for me to include any additional code snippets, and I really appreciate the help and guidance!</p>