Trying to convert my Http calls to AuthHttp calls and I get the compile errors listed below when using AuthHttp. I made 2 attempts in solving this and both produced different errors. I would like to preserve the structure I have of having the subscription come from the component and have the service return an observable.
The component that subscribes, the same for both trails.
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes.slice(1, 5));
}
}
The service, with non related code missing (other functions that have the same issue but I figure if I can get help with one I can figure out the other CRUD functions) i placed both of them uncomented but when I compile I comment one out.
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { MessageService } from './message.service';
// import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthHttp } from 'angular2-jwt';
import { catchError, map, tap } from 'rxjs/operators';
@Injectable()
export class HeroService {
...
/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
// Trial 1
return this.authHttp.get<Hero[]>(this.heroesUrl).pipe(
tap(heroes => this.log(`fetched heroes, ${this.heroesUrl}`)),
catchError(this.handleError('getHeroes', []))
);
// Trial 2
return this.authHttp
.get(this.heroesUrl)
.map((res: Response) => <Hero[]>res.json());
}
...
constructor(
// private http: HttpClient,
private authHttp: AuthHttp,
private messageService: MessageService) { }
}
The errors received
// Trial 1
ERROR in src/app/hero.service.ts(36,12): error TS2558: Expected 0 type arguments, but got 1.
// Trial 2
Property 'includes' is missing in type 'Promise<any>'.
ERROR in src/app/hero.service.ts(44,12): error TS2345: Argument of type '(res: Response) => Hero[]' is not assignable to parameter of type '(value: Response, index: number) => Hero[]'.
Types of parameters 'res' and 'value' are incompatible.
Type 'Response' is not assignable to type 'Response'. Two different types with this name exist, but they are unrelated.
src/app/hero.service.ts(44,31): error TS2352: Type 'Promise<any>' cannot be converted to type 'Hero[]'.
src/app/hero.service.ts(44,31): error TS2352: Type 'Promise<any>' cannot be converted to type 'Hero[]'.
Property 'includes' is missing in type 'Promise<any>'.
I am not sure what I am doing wrong, any assistance is appreciated.
Another question that is related is if I need to pass http options with AuthHttp? here is an example from the service
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
/** PUT: update the hero on the server */
updateHero (hero: Hero): Observable<any> {
const url = `${this.heroesUrl}/${hero.id}`;
return this.http.put(url, hero, httpOptions).pipe(
tap(_ => this.log(`updated hero id=${hero.id}, ${url}`)),
catchError(this.handleError<any>('updateHero'))
);
}
I use http here but will swap it out with authHttp and I am not sure if I need the httpOptions anymore?
Thanks in advance.
I believe you're missing the map function. You want something like this:
More can be found out here...
https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/