서비스 및 관찰 가능 AuthHttp를 사용하여 각도 2 +/Auth0

Question

내 Http 호출을 AuthHttp 호출로 변환하려고 시도하고 AuthHttp를 사용할 때 아래에 나열된 컴파일 오류가 발생합니다. 이 문제를 해결하기 위해 2 번의 시도를했으며 두 가지 오류가 발생했습니다. 구독을 구성 요소에서 가져온 구조를 유지하고 서비스에서 관찰 가능을 반환하도록하고 싶습니다.

구독하는 구성 요소로서 두 트레일 모두 동일합니다.

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)); 
    } 
} 

내가 그들 모두를 배치 uncomented하지만 때 (하지만 난 다른 CRUD 기능을 알아낼 수있는 한 도움을 얻을 수 있다면 나는 그림 같은 문제가 다른 기능을)없는 비 관련 코드 서비스, 나는 하나를 주석으로 처리한다.

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) { } 
} 

오류가 내가 뭘 잘못 확실하지 않다

// 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>'. 

을받은 모든 지원에 감사드립니다.

또 다른 질문은 AuthHttp와 함께 http 옵션을 전달해야하는 경우입니다. 여기

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')) 
    ); 
    } 

내가 여기 HTTP를 사용하지만 authHttp으로 그것을 교환 할 서비스의 예는 내가 더 이상 httpOptions 필요하면 나는 확실하지 않다?

미리 감사드립니다.

Answer 1

지도 기능이 누락되었다고 생각합니다. 이 같은 싶어 ...

getTenantId(): Observable<string> { 
return this.authHttp.get(this.apiUrl).map(res => res.json()); 
} 

더는 여기서 찾을 수 있습니다을

https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/