Angular(ver6~)でlibraryを作る方法

Angular(ver6~)でlibraryを作る方法:

AngularでLibraryを作る方法

AngularCLIのver6以降からLibraryを作るためのコマンドが追加されました。公式ドキュメントで詳細が書かれていないようですが、Angular CLIを使うことで今まで比較的困難であったAngularのLibraryを簡単に作れるようになりました。

手順

1.プロジェクトを作成

まず、普通にAngularアプリを作るのと同じ要領で ng new コマンドを使用します。

ng new your-app 

2.Libraryを作成

cd your-appでプロジェクトのルートに移動し、ライブラリを作成します。

ng new your-library-name 

ここで your-app配下に projects/your-libraryディレクトリが作られます。このディレクトリがあなたのプロジェクトになります。

※Angular6以降では、ng newコマンドで複数のプロジェクトを束ねる単位を作成し、ng generate library your-libコマンドやng generate application your-projectコマンドで配下に複数のプロジェクトを作成することができます。

Libraryだけを作りたい場合はyour-app配下にアプリケーションが無駄に作られてしまうのですが、この辺の運用方法を解説したドキュメントはまだ無いようです。

3.コンポーネントやディレクティヴを作成(任意)

以下のようなコマンドでライブラリ配下にコンポーネントやディレクティヴ等を作成できます。

ng generate component --project=your-library 
ng generate directive --project=your-library 

4.ビルド

your-appの直下で以下のコマンドでビルドできます。

ng build --project=your-library 

5.公開

npmを利用する場合

cd build/your-project 
npm publish --access=public 

※npmの利用方法 → 3分でできるnpmモジュール

6.注意点

1. 一度公開したプロジェクトを更新した場合、package.jsonのversionを繰り上げる必要があります。npmでは同じバージョンのプロジェクトを二度公開できません。
2. npmのフリーアカウントではプライベートlibraryが作成できないので、npm publish --access=public を実行する必要があります。2度目以降の公開では --accessオプションは不要です。
3. 公開したlibraryは npm install your-library@latestで最新のバージョンをインストールできます。
4. ライブラリ配下にnpmでパッケージをインストールした場合、あなたのライブラリを利用するプロジェクトの依存関係に影響を与える可能性があります。なのでライブラリ配下でパッケージをインストールする場合、ライブラリ内でパッケージの利用を明示的に許可する必要があります。そのための記述がng-package.jsonのwhitelistedNonPeerDependenciesオプションです。以下のような記述になります。

{ 
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 
  "dest": "../../dist/your-lib", 
  "lib": { 
    "entryFile": "src/public_api.ts" 
  }, 
  "whitelistedNonPeerDependencies": ["external-library-name"] 
}