● Angularでライブラリを作成して使用する

Angular の機能を拡張するために新しいライブラリを作成して公開することができます。
同じ問題を複数のアプリで解決する必要があると判断した場合 (または他の開発者と解決策を共有したい場合)、それはライブラリの候補となります。

1. サンプルアプリを作成する

ng new libapp
cd libapp

2. 「アプリ」内に「ライブラリ」を作成する

ng generate library my-lib

ディレクトリ projects\my-lib が作成されてその中に src\lib が作成されてそこにソース一式が作成されます。

3. 「アプリ」内の「ライブラリ」内「コンポーネント」を作成する

ng g c components/button --project my-lib

4. 「アプリ」内の「ライブラリ」内「コンポーネント」をビルドする

projects\my-lib\src\public-api.ts に次を追加

export * from './lib/components/button/button.component';

projects\my-lib\src\lib\my-lib.module.ts を次のように変更

  exports: [MyLibComponent]

　　↓

  exports: [MyLibComponent,ButtonComponent]

ビルドの実行

ng build my-lib --watch

5. 「アプリ」内の「ライブラリ」内「コンポーネント」を使用する

src\app\app.component.ts で読み込ませる

import { ButtonComponent } from 'my-lib';

src\app\app.component.html を次の内容に変更

<h1>テスト</h1>
<lib-button></lib-button>

アプリの実行

ng serve --open