Angular ライブラリを作成する

本日は、再利用可能なライブラリを新規に作成する予定です。

プロジェクトの作成

ライブラリのスケルトンを生成するために、Angular Cli を使用します。 angular cliがインストールされていない場合は、angular cli installation guideを参照してください。

以下のコマンドでangular project my-project と library my-lib

ng new my-projectcd my-projectng generate library my-lib

この結果my-projectフォルダに
my-lib.component.tsとmy-lib.service.tsが含まれるprojects/my-libが作成されます。 また、Angular cliはmy-libフォルダーにpublic-api.tsファイルを作成しました。 このファイルには、以下のコードが含まれています。

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';

このファイルは、ライブラリのユーザーが利用できるもの（別名パブリック API）を定義しています。

my-lib.component.ts を開くと、以下のコードがあります:

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}

This simple library output my-lib works! and we’ll use selector,
<lib-my-lib></lib-my-lib> to consume the component.The simple library output {9706>

npm依存としてライブラリをインストールします。

angularでライブラリを使用するには、npmなどのパッケージマネージャからライブラリをインストールする必要があります。 この例では、npmパッケージマネージャにライブラリは公開しないことにします。 もしangularライブラリを公開する方法について学びたいのであれば、angularガイドを参照してください。

次に、my-libをnpmの依存関係としてファイルからインストールします。

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }

my-libはnode_modulesフォルダにあるパッケージ名、file:projects/my-libは実際のライブラリになります。 npmにライブラリを公開する場合は、file:projects/my-libをバージョン番号(0.0.1)に置き換えます。

npm installを実行すると、node_modulesフォルダにmy-libが追加されていることがわかります。

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }

さて、ライブラリモジュールをプロジェクトにインポートしたので、MyLibComponentを使用することができます。 app.component.html を開き、すべてのコードを
<lib-my-lib></lib-my-lib> で置き換えてください。

アプリの実行

npm start または ng serve を実行し、アプリを起動します。 ブラウザを開いてhttp://localhost:4200にアクセスすると、my-lib works!が表示されます。

おめでとうございます！angularライブラリの作成に成功しました！

コードはgithub

で公開されています。