Creating a Custom Library with Angular

Creating a Custom Library

始めるには、まず CLI を使用して新しいプロジェクトを作成します。

この時点ですべて問題ないでしょう。 しかしここからは、Angular 6以降でCLIが提供するコマンド、ng generateを使う必要があります。 このng generateライブラリは、カスタムの共有ライブラリを作成するためのものです。

ng newを実行すると、ワークスペースにWebプロジェクトが1つ追加されることになります。 このng generateは、ワークスペースに2つ目のバージョンを追加し、npmや他のリソースに公開せずにAngularアプリで実際にライブラリをテストできるようにします。 これでtsconfigファイルが変更され、ワークスペース内の別のAngularプロジェクトが、これから構築する共有ライブラリにアクセスする方法を理解できるようになります。

ng build コマンドを使用してライブラリをビルドし、次のようにプロジェクト名を指定します：

これを使用して、ワークスペース内にある別の Angular プロジェクトで直接テストすることができます。 そのため、どこかで npm にパブリッシュする必要がなく、本当に簡単にこれを行うことができます。 その後、準備が整い、テストしてうまくいったら、npmに公開したいと思います。なぜなら、誰でもアクセスできるように公開されているnpmであろうと、会社の内部のnpmであろうと、npmからプルインできるようにしたいからです。 再利用を可能にするために、さまざまなアプリケーションにそれらを取り込みたいのです。 npm に貢献するのが初めての場合は、リンクがあります。

dist フォルダーに移動して package.json ファイルが含まれるようにするためにこれを行う必要があります。 これはnpmに公開するために使用されます。 次のコマンドを書くだけです:

さて、我々のソリューションでどのように異なるかを見るべきでしょうか。 それでは、行ってみましょう☺.

ではまず、projects フォルダがあることに気がつくと思います。 また、次の画像にあるように、tsconfig も更新されています。

ビルドすると dist フォルダを構築する場所のパスが追加されました。

さて、行われたもうひとつの大きなことは、angular.json ファイルに新しいプロジェクトが追加されたことです：

それで、ここに副プロジェクトがあって、これは braga-lib で、プロジェクトのルートへのパスに気づくことでしょう。 さて、ビルドとテストに必要な他のすべてが含まれています。 これが主な変更点です。 さて、ここからできることは、ライブラリに変更を加えることです。

lib にはコンポーネント、モジュール、そして必要ならサービスも含まれています。 コンポーネント ファイルを開くと、ほとんど「braga-lib works! これを変更することもできますが、今はこのままにしておいて、Angularプロジェクトで使ってみましょう。 これを見てみましょう。 そうそう☺

。