質問: Angular4にて下記を使用してWEB APIを実施しています。 this.http.get(url) Angular4のHTTPでデータが取得できない 上記ようなソースで、「InMemoryWebApiModule」を使わないようにしています。 実行すると下記のWEB APIが実行されており、 ``` Request URL:http://localhost:4200/app/XXXX ``` ベースとなるRequest URLは「」となっています。 環境の中をグレップしてみると、以下のような指定があったため、ポートなどを変えてみたのですが、 「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は「」となっています。 ただ、どこでこの定義がされているのかがわかりませんでした。
回答: 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に説明があります。