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ライブラリーを作成する。 user@nameMacBook-Air filename % ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 19.2.19 Node: 22.7.0 Package Manager: npm 10.8.2 OS: darwin arm64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1902.19 (cli-only) @angular-devkit/core 19.2.19 (cli-only) @angular-devkit/schematics 19.2.19 (cli-only) @schematics/angular 19.2.19 (cli-only) バージョンとか前提はこんな感じだった。

blog.nove-b.dev · nove-b