Saturday 8 April 2017

Angular 2 GET request

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"
    ]
  }
]



via Cooby Booby

No comments:

Post a Comment