0

Angular4にて下記を使用してWEB APIを実施しています。

this.http.get(url)
Angular4のHTTPでデータが取得できない

上記ようなソースで、「InMemoryWebApiModule」を使わないようにしています。

実行すると下記のWEB APIが実行されており、

Request URL:http://localhost:4200/app/XXXX

ベースとなるRequest URLは「http://localhost:4200/」となっています。

環境の中をグレップしてみると、以下のような指定があったため、ポートなどを変えてみたのですが、
「ng serve --open」で再度実施してもポートは変わりませんでした。

protractor.conf.js
  baseUrl: 'http://localhost:4200/',

また、以下でビルドを実施、Tomcat配下に配置すると、
ng build --prod --aot=false --output-hashing=none --base-href=/Test/
下記のWEB APIが実行されており、

Request URL:http://localhost:8080/XXXX

ベースとなるリクエストのURLは「http://localhost:8080/」となっています。

ただ、どこでこの定義がされているのかがわかりませんでした。

1 件の回答 1

0

HttpModuleの内部では通信にXMLHttpRequestが使われています。
this.http.get('api/heroes')のように相対パスが指定された場合、リクエスト先のURLはdocument.baseURI + 'api/heroes'のように解決されます。

Angularアプリがhttp://localhost:4200/に配置されていればリクエスト先はhttp://localhost:4200/api/heroesになります。
http://localhost:8080/Test/に配置されていればリクエスト先はhttp://localhost:8080/Test/api/heroesとなるわけです

また、protractor.conf.jsはE2Eテスト用の設定のためng serveの動作には影響しません。
ng serveのポートを変更したい場合は.angular-cli.jsonファイルに記述します。

  "defaults": {
    "styleExt": "css",
    "component": {},
    "serve": {"port": 8080}
  }

のようにdefaultsの部分に記述します。
.angular-cli.jsonについてはAngular CLI Config Schemaに説明があります。

1
  • shimiteiさま回答ありがとうございます。さっそく試してみようと思います!
    – kanko
    Commented 2017年10月20日 10:30

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。