【Angular】IPアドレスを取得する

はじめに

今回はAngularでIPアドレスの取得を試してみました。
意外と簡単に実装することができました。
ただ、また実装するときのために備忘録として残すことにします。
他の方の参考にもなればと思います。

バージョン

• Angular: 9.1.11
  バージョンの確認方法については過去記事に記載しております。

結論の前に

IPアドレスを取得するにはAngularの機能だけではなく「ipinfo.io」というサービスを使っています。
こちらのサービスを使うだけで簡単にIPアドレスを得ることができます。
無料でもかなり使えるのでおすすめです。

結論

※moduleの設定はAngular:サーバーとの通信の設定が参考になります。

test.module.ts

// 前略
import { HttpClientModule } from '@angular/common/http';

// 中略
@NgModule({
  imports: [
    HttpClientModule,

// 後略

test.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit
{

  constructor(
    private httpClient: HttpClient
  ) {}

  async ngOnInit(): Promise<void> {
    try {
      const ipAddress = await new Promise((resolve, reject) => {
        this.httpClient.get("https://ipinfo.io")
          .subscribe(data => {
            return resolve(data['ip']);
          }, error => {
            return reject(error);
          });
      });
      console.log(ipAddress);
    } catch(error) {
      console.log(error);
    }
  }
}

参考文献

ipinfo.io
Angular:サーバーとの通信の設定