2016-12-12 35 views
0

私はangular2ヒーローのチュートリアルhttps://angular.io/docs/ts/latest/tutorial/を終了しました。今はNode、Postgresql、Expressで作ったRAL REST APIを呼び出そうとしています。angular2からREST APIを呼び出す

APIを呼び出すangular2コードは次のようになります。

...

export class HeroService{ 

    private heroesUrl = 'http://192.168.4.13:3000/api/boxes'; //URL til api 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    constructor(private http: Http) {} 

    getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
    .toPromise() 
    .then(response => response.json().data as Hero[]) 
    .catch(this.handleError); 
    } 

...

をブラウザのコンソールが表示さ:

エラーが発生したレスポンスを{_body :オブジェクト、ステータス:404、ok:false、statusText: "Not Found"、ヘッダー:ヘッダー...} EXCEPTION:未知(約束):ステータス付き応答:404 Not F ound URLについて:ヌル

Picture from REST API

そして私は私のAPIのisen'tが呼び出されていることがわかります。 私は何が欠落しているかのアイデアですか?

よろしくお願いいたします。

+1

エラーメッセージは、URLが間違っていることを示しています。つまり、「404」を返します。 'response'で' .json() 'を呼び出そうとすると、内容がJSONではないので失敗します。コールしようとしているAPIのURLは何ですか?サーバー側でどのようにAPIを定義しましたか? –

+0

残念ながら、APIは公開されていませんが、私は自分の投稿を画像で更新しました。その結果、APIの結果の構造を見ることができます。 – Tony

+0

これはばかげているかもしれませんが、URLから 'http://'部分を削除しようとしましたか?また、ブラウザコンソールを開き、ネットワークタブを選択して、これが呼び出されると予想されるページを更新することができます。それは問題の理解を助けるかもしれません。 –

答えて

1

私が呼び出されるバックエンドのためにこれらの行を削除するために必要なことをfigurd:

// Imports for faking the http service - in-memory web api 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service'; 

私が使用されていないときAngular2がそれらを無視するだろうと思ったが、いないことに、新たなバックエンドAPIを引き起こしましたと呼ばれる。

関連する問題