Angular moving CRUD functions to service -

i'm struggling migrate crud functions service, feel belong. think has lack of understanding of map , subscribe etc.

my 'get' function

getclients() : observable<client[]> {   return this.authservice.get('clients')     .map(res => res.json())     .catch((error: any) => observable.throw(error.json().error || 'server error')); }; 

this httpwrapper provided angular2-token. works posted in component expected results. however, want move client service

service

import { injectable }     '@angular/core'; import { client }     '../client/client'; import {observable} 'rxjs/rx';  // import rxjs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { angular2tokenservice } "angular2-token";  @injectable() export class clientservice{    constructor(private authtoken: angular2tokenservice) {   }      getclients() : observable<client[]> {       return this.authtoken.get('clients')         .map(res => res.json())         .catch((error: any) => observable.throw(error.json().error || 'server error'));     }; } 

i modify component resemble

  constructor(private clientservice: clientservice) { }   clients: client[];    ngoninit() {     this.clientservice.getclients();   }    getclients() : observable<client[]> {     return this.clientservice.getclients();   } 

and receive uncaught error every page load, compilation works.

i believe because i'm over-simplifying it, i'm unsure how appropriately 'subscribe' component.

do .map() res , subscribe within component?

update based on comments

service

import { injectable }     '@angular/core'; import { client }     '../client/client'; import {observable} 'rxjs/rx';  // import rxjs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { angular2tokenservice } "angular2-token";  @injectable() export class clientservice{    constructor(private authtoken: angular2tokenservice) {   }    getclients() {     this.authtoken.get('clients')       .map(res => res.json())       .catch((error: any) => observable.throw(error.json().error || 'server error'));   };  } 

component

import { component, input, oninit } '@angular/core'; import { client } "./client"; import { angular2tokenservice } "angular2-token"; import { observable } "rxjs/observable"; import { clientservice } "../services/client.service";  @component({   selector: 'app-client',   templateurl: './client.component.html',   styleurls: ['./client.component.sass'] }) export class clientcomponent implements oninit {    constructor(private                 // authservice: angular2tokenservice   clientservice: clientservice   ) {   }    clients: client[];    ngoninit() {     this.getclients();   }    getclients() : observable<client[]> {     this.clientservice.getclients()       .subscribe(res => {         console.log(res)       });   }    // getclients(): observable<client[]> {   //   this.authservice.get('clients')   //     .map(res => res.json()).subscribe(   //       res => this.clients = res,   //       error => console.log(error)   //     );   // } }; 

i have required. getting 3 errors (2 on service , 1 on component) a function declared type neither 'void' nor 'any' must return value.

last time 'returning' value in component resolved it, unsure service should like.

you need subscribe getclients method see results

e.g

this.clientservice.getclients().subscribe((data) => console.log(data)); 

or doing

constructor(private clientservice: clientservice) { }   clients: client[];  ngoninit() {   this.clientservice.getclients().subscribe((data) => {   console.log(data); },(err) => {   console.log(err); }); }  getclients() : observable<client[]> {    return this.clientservice.getclients(); }