アプリケーション開発でOSSを利用する時、多くの場合ライセンス表示が必要になります。
Angularでは、ビルド時に生成される3rdpartylicenses.txt（以降、「~.txt」）を利用することで簡単にライセンス表示を実現できます。
Angularに加えてIonic・Capacitorフレームワークを利用してモバイルアプリを開発する場合にもこのファイルを利用したかったのですが、Webアプリとは異なる方法で実装する必要があったためまとめました。

Webアプリにおける3rdpartylicenses.txtの使い方

そもそもブラウザでアクセスするWebアプリにおいては、大きく2通りの実装方法があります。

1. 直接~.txtファイルのパスにアクセスさせる

Angularでは、ng build --prodを実行するとdist/[プロジェクト名]ディレクトリに~.txtが生成されます。
この状態でアプリをデプロイするだけで、[URL]/3rdpartylicenses.txtのURLでライセンス表示を公開することができます。
ただし、txtファイルにアクセスしているだけなので、当然一切スタイルの無いプレーンテキストで表示されます。
こちらはangular.ioの3rdpartylicenses.txtの例です。

2. ~.txtファイルの内容を読み込んでComponentに表示する

1.の発展形として、HttpClientで[URL]/3rdpartylicenses.txtの内容を取得してComponentに表示することもできます。
1.とは異なりスタイルなどのカスタマイズも可能です。
この方法はこちらの記事で紹介されていました。

Ionic・Capacitor環境での実装

Ionic・Capacitorを利用したモバイルアプリでは、通常のWebアプリとは仕組みが異なるため、1.の方法も2.の方法もそのまま使うことができません。
ではどうするかというと、以下の方法を取ることで解決できました。

スクリプトを用意して、ビルド時に~.txtファイルをassetsディレクトリにコピーする
assets配下の~.txtファイルの内容を読み込んでComponentに表示する

順番に解説していきます。

assetsディレクトリへのコピースクリプト

Ionicでは、~.txtファイルはwwwディレクトリ配下に生成されます。
そのままではAngularのコードから参照できないため、assetsディレクトリなどにコピーする必要があります。
今回は、プロジェクトトップに以下のようなコピースクリプトを用意します。

copy-licenses.js

fs = require('fs');
path = require('path');
// Ionicでは~.txtはwwwディレクトリ配下に生成される
srcPath = path.join(__dirname, './www/3rdpartylicenses.txt');
// assets配下にコピーする
destPath = path.join(__dirname, './src/assets/3rdpartylicenses.txt');
fs.copyFileSync(srcPath, destPath);

次に、package.json内のビルドコマンド部分を修正して、ビルドで~.txtが生成された直後にコピースクリプトが呼ばれるようにします。

package.json

  "scripts": {
    "build": "ionic build && node copy-licenses.js",
    "buildprod": "ionic build --prod && node copy-licenses.js"
  }

何かライブラリを追加した時、ビルドすることによって~.txtファイルが再生成され、そのライブラリのライセンス表記も追加されます。
ビルドの度にコピースクリプトを走らせることで、ライセンス表記の追加漏れを防ぐことができます。

Componentへの表示

ミニマムな実装で、ライセンスページにファイルの中身を表示していきます。
assets配下のリソースはHttpClientで読み込めるので、まず~.txtファイルの内容を変数に読み込みます。

license.page.ts

export class LicensePage {
  private httpClient = inject(HttpClient);
  // ~.txtファイルの中身を変数に読み込む
  licenses$ = this.httpClient.get(
    'assets/3rdpartylicenses.txt',
    {responseType: 'text'}
  );
}

licenses$はObservable<string>型のため、asyncパイプをかませてpreタグの中に表示します。

license.page.html

<!--ion-headerは省略-->
<ion-content [fullscreen]="true" class="ion-padding">
  <pre
  style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word">
    {{ licenses$ | async }}
  </pre>
</ion-content>

preタグに表示しているだけなのでシンプルな見た目ですが、これでライセンス表示を実装することができました。

おまけ

~.txtファイルの中身は一定の規則性に沿ってライセンス表記が並んでいるので、適宜パースして扱うことも可能です。