angular front-end with laravel 5.3 back-end

article.component.ts

import {Component, OnInit} from "@angular/core";
import {ArticleService} from "./article.service";
import {Article} from "./article";
@Component({
    moduleId: module.id,
    selector: 'article',
    template: `
    <h1>All Articles</h1>
    <hr>
    <div *ngFor="let article of articles">
        <h2>{{article.title}}</h2>
        <p>{{article.body}}</p>
    </div>
    
`   ,
    providers: [ArticleService]
})

export class ArticleComponent implements OnInit {
    articles: Article[];
    errorMessage: string;
    mode: 'Observable';

    constructor(private articleService : ArticleService){}

    ngOnInit(){this.getArticles()}

    getArticles(){
        this.articleService.getArticles()
            .subscribe(
                articles => this.articles = articles,
                error => this.errorMessage = <any>error
            );
    }
}

article.service.ts

import {Injectable} from "@angular/core";
import {Jsonp, Response} from "@angular/http";
import {Observable} from "rxjs/Observable";
import {Article} from "./article";
@Injectable()

export class ArticleService {

    private articleUrl = 'http://localhost/angu_lara/public/articles';


    constructor(private jsonp: Jsonp){}

    getArticles (): Observable<Article[]> {
        return this.jsonp.get(this.articleUrl)
            .map(this.extractData)
            .catch(this.handleError);
    }


    private extractData(res: Response){
        let body = res.json();
        return body || {};
    }

    private handleError(error: any){
        let errMsg = (error.message) ? error.message:
            error.status ? `${error.status}-${error.statusText}`:`Server error`;
        console.log(errMsg);
        return Observable.throw(errMsg);
    }
}

article.ts

export class Article{
    constructor(
        public id: number,
        public title: string,
        public body: string
    ){}
}