Angular 2 GET request - node.js

Question

I am extremely incompetent in Angular 2. I have been using it for a while, and the only thing that I can ever get to work is when I copy and paste from tutorial videos.
With that said, I am creating a REST api (Node.js, expressJS, angular2, mongodb) and I am having trouble calling a GET from frontend to backend. I am trying to call an endpoint (/games) that returns an array of game objects. I want to use this array to display the games eventually, but I can't even get a successfull call working correctly.
I'm trying to use all-games.component.ts to use the service get-last25.service.ts to return all of the games from the database (25 max). I have JWT authentication turned off for this route for now.
The errors I receive:
Unhandled Promise rejection: No provider for GetLast25Service! ; Zone: angular ; Task: Promise.then ;
and
EXCEPTION: Uncaught (in promise): Error: DI Error
and an empty error...
=====================================
Code:
get-last25.service.ts:
import { Injectable } from '#angular/core';
import {Http, Headers} from '#angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from 'angular2-jwt';
#Injectable()
export class GetLast25Service {
constructor(private http:Http) { }
getLast25(game){
if(game == null || game == undefined){
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http.get('http://localhost:3000/games',{ headers: headers })
.map(res => res.json());
} else {
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http.get(`http://localhost:3000/games/${game}`,{ headers: headers })
.map(res => res.json());
}
}
}
all-games.component.ts:
import { Component, Input, OnInit, ViewEncapsulation } from '#angular/core';
import { ActivatedRoute, Router, Params } from '#angular/router';
//import {FlashMessagesService} from 'angular2-flash-messages';
import { AuthService } from '../../services/auth.service';
import { GetLast25Service } from '../../services/get-last25.service';
#Component({
selector: 'app-all-games',
templateUrl: './all-games.component.html',
styleUrls: ['./all-games.component.css']
})
export class AllGamesComponent implements OnInit {
private games: any[];
private comments: any;
constructor(
private route: ActivatedRoute,
private router: Router,
private authService: AuthService,
//private flashMessage: FlashMessagesService,
private getLast25Service: GetLast25Service
) { }
ngOnInit() {
this.getLast25Service.getLast25(null).subscribe(games => {
this.games = games;
},
err => {
return false;
});
}
}
whenever I call get(http://localhost:3000/games), it returns:
[
{
"_id": "58e87513fbcdca1f54b4a84c",
"name": "League of Legends",
"game_endpoint": "lol",
"release_date": "2012-04-23T18:25:43.511Z",
"image_path": "../assets/images/lol.png",
"__v": 0,
"posts": 0,
"subscribers": 0,
"categories": [
"MOBA",
"strategy",
"multiplayer",
"Dota ripoff"
]
},
{
"_id": "58e8823b8da3fa1e6c8f0885",
"name": "Rocket League",
"game_endpoint": "rl",
"release_date": "2012-04-23T18:25:43.511Z",
"image_path": "../assets/images/rocketleague.png",
"__v": 0,
"posts": 0,
"subscribers": 0,
"categories": [
"cars",
"racing",
"soccer",
"chat_disabled"
]
}
]

Answer 1

You need to add the service as a Provider to the module,
#NgModule({
providers: [
GetLast25Service
]
})