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

AngularでLibraryを作る方法

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

手順

1.プロジェクトを作成

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

ng new your-app

2.Libraryを作成

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

ng generate library 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

ディレクティヴやコンポーネントを公開したい場合にはディレクティヴのdeclarationとexport, public_api.tsからexportを忘れずに。

your-library.module.ts

@NgModule({
  imports: [],
  declarations: [
    YourDirective,   
  ],
  exports: [
    YourDirective,
  ]
})
export class YourLibraryModule {
}

public_api.ts

/*
 * Public API Surface of x-angular-bootstrap
 */
export * from './lib/your-library.module';
export * from './lib/your-directive.directive';

4.ビルド

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

ng build --project=your-library

5.公開

npmを利用する場合

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

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

6.注意点

一度公開したプロジェクトを更新した場合、package.jsonのversionを繰り上げる必要があります。npmでは同じバージョンのプロジェクトを二度公開できません。
npmのフリーアカウントではプライベートlibraryが作成できないので、npm publish --access=public を実行する必要があります。2度目以降の公開では --accessオプションは不要です。
公開したlibraryは npm install your-library@latestで最新のバージョンをインストールできます。
ライブラリ配下に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"]
}