Angularのライブラリを作成し、GitHub Packagesで共通化、複数のAngularプロジェクトで使用する

はじめに Angularで複数のプロジェクトを作成している。基本的なデザインシステムがあるのでそれを各プロジェクトで使用したいのだが、プロジェクトごとで二元管理をしたくないので、submoduleを使用していたんだけど、運用が面倒なのでGitHub Packagesに移行することにした。 Angularでライブラリを作成しGitHub Packageで公開するメモを書いておく。 Angularライブラリとは まずそもそそもAngularのLibraryとは、 > Angularライブラリは、コンポーネント、サービス、ディレクティブなどの再利用可能なコードをまとめたパッケージです。これらは単独で実行することはできず、Angularアプリケーションにインポートして使用されます。 とのこと。 GitHub Packagesとは そしてGitHub Packagesとは > GitHub > Packagesは、コンテナやその他の依存関係を含むソフトウェアパッケージをホストおよび管理するためのプラットフォームです。ソースコード管理とパッケージ管理を同じGitHub上で一元化できる点が大きな特徴です。 とのこと。 GitHub Packagesの利用シーン GitHub Packagesの利用シーンとしては、 > 組織内でのみ共有したい非公開のライブラリやコンポーネントを、npmやDocker > Hubのような外部サービスではなく、GitHub内で安全にホストしたい場合。 ちなみにnpmパッケージも非公開で公開できるらしい。 ただ有料らしいので、制限付きとはいえ無料で非公開設定ができるという点では、GitHub Packagesの方が有用そうだった。 GitHub Packagesの制限 制限は - ストレージ容量:500 MB - データ転送量:1 GB/月 (月間) とのこと。 利用枠的にUIコンポーネントを共有する分にはなんの問題もない気がする。 Angularライブラリの作成 まずはAngularのUIライブラリーを作成する。 バージョンとか前提はこんな感じだった。 プロジェクトの作成 このコマンドでアプリケーション自体を作成せずにAngularの箱を作成する。 ライブラリの生成 次にライブラリを作成する。 を書くことでui-buttonのように接頭辞をつけることができる。 このコマンドを実行することで、projects/ui-libraryフォルダができる。 このsrc/lib以下にコンポーネントを作成していく。 コンポーネントの作成 例えばButtonコンポーネントを作成するのであれば、 でコンポーネントを作成する。 public-api.tsへの登録 作成できたら外部に公開する要素の定義をするために、public-api.tsに登録する。 GitHub Packagesへの公開準備 これでライブラリの準備はできたので次にGitHub Packagesを使用する準備をする。 package.jsonの修正 projects/ui-library/package.jsonを修正する。 パッケージ名にGithubのアカウント名を入れるようにする。 Personal Access Tokenの発行 次にPersonal Access Token (Classic)を発行する。 この時に、スコープ選択で write:packages (パッケージのアップロード用) と read:packages (ダウンロード用) にチェックを入れて生成する。 .npmrcの設定 Tokenの発行ができたら公開をするために、.npmrcをルートに作成する。 秘匿情報を入れるのに.ignoreする。 ライブラリのビルドと公開 これで公開の準備が整ったので、ライブラリをビルドする。 ライブラリのビルド これでbuildファイルができるので、公開する。 ライブラリの公開 なぜかうまくいかなかったのでコマンドから試みる。 これでログインできたので公開する。 無事に公開できた。 angular-ui-component ライブラリの使用 次にこれを使用してみる。 まずはまたAngularのアプリケーションを作成するけど、そこら辺は割愛する。 で、立ち上げた。 !ng new これにさっきのライブラリを呼び出すようにする。 使用するアプリケーションでの.npmrcの設定 まずはルートに.npmrc を作成する。 ライブラリのインストール 次にインストールする。 コンポーネントのインポートと使用 インストールが完了したら使用するコンポーネントファイルにインポートする。 これ画面で確認できた。 !ng new まとめ・考察 組織の場合はTokenとかどういう運用になるんだろう。今は個人でやっているので、個人のTokenを使っているけれど、みたいな疑問もあるけれど、社内システムのUIコンポーネントとかを作成しておき、cssを上書きできるようにしておけばすごい汎用性高そうだ。 まあ、社内システムにAngularを使うかというと微妙なところなので、せめてvue、reactでAngularライブラリのような仕組みがあればいいかもしれない。 あるいはvanilla jsにするかというところか。 > せめてvue、reactでAngularライブラリのような仕組みがあればいいかもしれない。 組み込みではないっぽい。組み合わせできるっぽいので今度挑戦してみたい。