Angular 2 Http Uncaught SyntaxError: Unexpected token <

Question

With the code below I'm getting a javascript error in the browser:

Uncaught SyntaxError: Unexpected token <

If I remove constructor(private _http:Http) { } from image.service.ts, the error does not occur anymore.

Am I using http wrongly? How would I go about making a http service that just returns json?

App.compontent.js:

import {Component, OnInit} from 'angular2/core';
import {Image} from './image';
import {ImageDetailComponent} from './image-detail.component';
import {ImageService} from './image.service';

@Component({
    selector: 'my-app',
    directives: [ImageDetailComponent],
    providers: [ImageService],
    template: `
    <h1>{{title}}</h1>
    <h2>Choose your security image</h2>
    <button (click)="getImageData()">Get Image Data!</button>
    <ul class="images">
      <li *ngFor="#image of images"
        (click)="onSelect(image)">
        <img class="image-responsive" src="{{image.imageurl}}">
      </li>
    </ul>
    <my-image-detail [image]="selectedImage"></my-image-detail>
    `
})

export class AppComponent implements OnInit{
  title = 'Authenticate';
  images: Image[];
  selectedImage: Image;

  constructor(private _imageService: ImageService) { }

  getImages() {
     this._imageService.getImages().then(images => this.images = images);
   }
   ngOnInit() {
     this.getImages();
   }

  onSelect(image: Image) { this.selectedImage = image; }
}

image.service.js:

import {Image} from './image';
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable()
export class ImageService {

  constructor(private _http:Http) { }
  items: Array<Image>;

  getImageData() {
    this._http.get('http://localhost/pincode/api/src/1.0/get/images.php')
      .map(res => res.json())
      .subscribe(
        data => this.items = data,
        err => this.logError(err),
        () => console.log('Got Images')
      );
    return this.items;
  }

  logError(err) {
    console.error('There was an error: ' + err);
  }

  getImages() {
     return Promise.resolve(this.getImageData());
   }

}

See what's in your browser's network panel. It's possible that your server returns some html instead of a valid js source somewhere. (common problem with html5 apps) — Tamas Hegedus
– Tamas Hegedus, Commented Feb 13, 2016 at 17:06

Thierry Templier · Accepted Answer · 2016-02-13 17:01:16Z

1

I think that your forgot to include the HTTP JS file for Angular2:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script> <-----

edited Feb 13, 2016 at 17:01

answered Feb 13, 2016 at 16:47

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jeerbl Over a year ago

This kind of error are often due to a syntax error. If http was not included, Angular would have failed gently I think.

Thierry Templier Over a year ago

I saw in the past that such message was a consequence of a 404 response for a module... That said it difficult to understand from the question where this error occurs ;-)

ClickThisNick Over a year ago

I was missing the bundles/http.dev.js file. Also then I didn't have import HTTP_PROVIDERS

Thierry Templier Over a year ago

Yes the http support isn't contained into the Angular2 core. Pleased to hear that this fixed your problem!

Collectives™ on Stack Overflow

Angular 2 Http Uncaught SyntaxError: Unexpected token <

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related