Angular - this.service.get... is not a function

Uczę się Angulara i zawiesiłem się chyba na DI. Dostaję błąd w konsoli:

ERROR TypeError: this.service.getPopularCrafters is not a function
    at CraftersComponent.ngOnInit (webpack-internal:///./src/app/crafters/crafters.component.ts:20)
    at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12627)
    at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151)
    at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094)
    at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987)
    at debugCheckDirectivesFn (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14928)
    at Object.eval [as updateDirectives] (ng:///AppModule/CraftersComponent_Host.ngfactory.js:9)
    at Object.debugUpdateDirectives [as updateDirectives] (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14913)
    at checkAndUpdateView (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14060)
    at callViewAction (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14411)

Kod:
komponent

import { Component, OnInit } from '@angular/core';
import { CraftersService } from '../services/crafters.service';

@Component({
  selector: 'app-crafters',
  templateUrl: './crafters.component.html',
  styleUrls: ['./crafters.component.scss']
})
export class CraftersComponent implements OnInit {
  crafters: any[];

  constructor(private service: CraftersService) { }

  ngOnInit() {
    this.service.getPopularCrafters().subscribe(response => {
      this.crafters = response.json().crafters;
    });
  }

}

serwis:

import { environment } from '../../environments/environment';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class CraftersService {
  private urlPopularCrafters = environment.apiUrl + "crafters/popular";

  constructor(private http: Http) { }

  getPopularCrafters(pageNum = 1) {
    return this.http.get(this.urlPopularCrafters + pageNum);
  }
}

app module

import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CraftsComponent } from './crafts/crafts.component';
import { CraftersComponent } from './crafters/crafters.component';
import { HomeComponent } from './home/home.component';

import { CraftService } from './services/craft.service';
import { CraftersService } from './services/crafters.service';

const routes: Routes = [
  //{ path: 'crisis-center', component: CrisisListComponent },
  //{ path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'home',
    component: HomeComponent,
    data: { title: 'Crafts List' }
  },
  {
    path: 'crafters',
    component: CraftersComponent,
    data: { title: 'Crafters List' }
  },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  //{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    CraftsComponent,
    CraftersComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpModule
  ],
  providers: [
    CraftService,
    CraftersService
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

Podobny kod działa dla CraftComponent, tyle że tamten jest wyświetlany pośrednio przez HomeComponent, a CraftersComponent bezpośrednio idzie z routingu.

Tu całe repo: https://github.com/team9lipca/handcrafters-web/tree/first-works

Będę wdzięczny za podpowiedź.

Już po problemie. Byłbym zdziwiony gdyby nie fakt, że mam do czynienia z JavaScriptem.
Napisałem post na forum i uśpiłem komputer. Wróciłem po dwóch godzinach, otworzyłem laptopa - laravelowy serwis i angular jeszcze stały (developie sobie lokalnie). Odświeżam stronę, patrzę w konsolę, a tam inny błąd - "ERROR SyntaxError: Unexpected token < in JSON at position 0" w pliku core.js z linii 1000+ którejśtam. Googluję i znalazłem komentarze, że to przez błąd w zwrotce z API. Przełączam zakładkę na network i rzeczywiście brakło slasha w środku adresu. Poprawiłem i teraz śmiga.