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