Angular6で導入されたことの1つは、Angular CLIを使用してライブラリを作成および構築する機能でした。

私が最初にこの機能を使用したとき、以前のバージョンのAngularを使用してライブラリを作成することは技術的に可能でしたが、完全にイライラして悲しこの記事では、Angularライブラリを開発するための重要な要素を説明します。

  • Angularライブラリの一般的な使用例。Angular CLIを使用してライブラリを作成します。
  • npm linkを使用したAngularライブラリの開発を高速化します。
  • ライブラリを公開します。

作成したライブラリの完全なデモコードはここで見つけることができます。

Angularライブラリのユースケース

私の経験から、Angularライブラリには2つの一般的なユースケースがあります。

  1. アプリケーション間で共有するための再利用可能なコンポーネントライブラリを構築します。
  2. 共有サービス層機能の構築-例。 APIなどの外部データソースを操作するためのクライアント。

Angularライブラリがプロジェクトに適しているケースはたくさんありますが、保守のオーバーヘッドが発生するため、ユースケースがこれらのものかどうかを検討する価値があります。 アプリケーション内の共有Angularモジュールの一部として機能を記述し、必要に応じてライブラリに抽出することができます。

Angularライブラリプロジェクトの作成

Angularライブラリと、このライブラリを使用するデモアプリケーションを作成します。 これらは次のコマンドで作成できます:

ng new example-component-library --create-application=falsecd example-component-libraryng generate library example-component-libraryng generate application example-component-library-app

--create-application=falseフラグを使用すると、Angularが”example-component-library”という名前のアプリケーションを作成できなくなります。

作成したワークスペースの内部を見ると、生成したライブラリ（example-component-library）とアプリケーション（example-component-library-app）のそれぞれのサブフォルダを含むprojectsフォル E2eテストプロジェクトを含む3番目のフォルダもありますが、これは無視できます。

ここでライブラリをビルドして何が起こるかを見てみましょう。

ng build --project=example-component-library

distフォルダを見ると、ライブラリがビルドされており、buildフォルダの中には、さまざまなコンシューマーに適したさまざまなモジュール形式のアプリケーションを含むいくつかの異なるフォルダと、TypeScript定義を含むフォルダがあることがわかります。/p>

  • バンドル-UMDモジュール形式。
  • esm5-主にes5を使用するモジュール形式ですが、es6からのインポート/エクスポート構文も使用します。
  • esm2015-es2015/es6を使用するモジュール形式。
  • fesm5-esm5のフラット化バージョン。
  • fesm2015-フラット化されたバージョンのpeerDependenciesesm2015。
  • lib-ライブラリのTypeScript定義。この形式はAngularパッケージ形式と呼ばれ、Angular CLIがライブラリを変換するために使用するツールであるng-packagrの出力として使用される形式です。

    Angularライブラリプロジェクトの構造化

    ライブラリの内容は現在次のようになります。

    フォルダ構造Initial

    まず、既存のexample-component-libraryモジュール、コンポーネント、およびサービスファイルを削除します。

    次に、コンポーネント、パイプ、ディレクティブを追加します。 これにより、消費するアプリケーションは、関心のあるライブラリのモジュールのみをインポートし、ビルドプロセス中に他のすべてのモジュールをツリーシェイクすることができるようになります。 ライブラリが大きくなるにつれて、アプリケーションバンドルのサイズに実際に違いが生じるので、これを行うことを強くお勧めします。

    ng generate module components/foong generate component components/foong generate module pipes/barng generate pipe pipes/bar/barng generate module directives/bazng generate directive directives/baz/baz

    これを行った後、私たちのライブラリは、次のフォルダ構造を持っている必要があります。

    フォルダ構造Final

    もちろん、この構造は、あなたやあなたのチームの好みに基づいて調整することができますが、心に留めておくべき重要なことは次のとおりです。

    • モジュールごとに一つのコンポーネントを持っており、ツリーの揺れを可能にするために、モジュールごとに一つのコンポーネントを持っています。未使用のモジュール/コンポーネント。

      この例外は、常に一緒に使用されるコンポーネントを同じモジュールに保持する必要があることです。 タブを実装していた場合、TabGroupComponentとTabItemComponentは同じモジュールに存在します。

    • Angularライブラリ内でのバレルのインポートの使用を回避または制限しようとします

      Angular6では、ライブラリとAngular AOTビルドでのバレルのインポートに問題があります。 これらの問題はAngular7で修正されているようですが、私はまだバレルの輸入のために混乱する問題に定期的に遭遇しているので、バレルの輸入を1レベ

    次に、作成した各コンポーネントをモジュールのexportsに追加する必要があります。

    import { CommonModule } from '@angular/common';import { FooComponent } from './foo.component';import { NgModule } from '@angular/core';@NgModule({ declarations: , imports: , exports: })export class FooModule { }

    public_api.tsを更新して、消費アプリケーションに公開したいライブラリ内のファイルをエクスポートします:これで、ライブラリを再構築するだけで、アプリケーションからライブラリを使用する準備が整います。開発中にAngularライブラリを使用する

    ライブラリを使用する最良の方法は、npm linkを使用することです。 これにより、消費するアプリケーションのnode modulesフォルダ内のディレクトリから、ライブラリのdistフォルダ内のコンパイルされたアプリケーショローカルマシン上の任意の場所からAngularプロジェクトをこのライブラリにリンクできます。

    cd dist/example-component-librarynpm link

    ローカルマシン上の任意の場所からAngularプロジェクトをこのライブラリにリンクすることができます。 プロジェクトのルートフォルダから：

    npm link example-component-library

    watchフラグでライブラリを実行し、同時にng serve別のターミナルウィンドウで実行します。

    ng build --project=example-component-libraryng serve

    これにより、アプリケーションと（一つ以上の）リンクされたライブラリを同時に開発し、ライブラリのソースコードを変更するたびにアプリ本番環境では、ライブラリをnpmに公開し、npm installを使用してアプリケーションにインストールします。まず、npmアカウントを作成する必要があります。 コマンドラインからログインします。

    npm login

    プロジェクトのルートフォルダから：

    cd dist/example-component-librarynpm publish

    パッケージはnpm（公に）に公開され、アプリケーnpm install:ライブラリに依存関係がある場合、これらは次のいずれかとして指定する必要があります。dependenciespeerDependenciespackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonpackage.jsonプロジェクトのルートにあります）。 たとえば、単純なライブラリの場合、次の依存関係があります:消費するアプリケーションに複数の競合するバージョンのAngularをインストールさせないようにするために、AngularはpeerDependencydependencypeerDependenciesとそれらを使用する時期に関するいくつかの良い情報があります。

    結論

    複数の異なるAngularアプリケーションで使用できるAngularコンポーネントライブラリを作成する方法と、開発中のライブラリを操作して実 以下では、Angularライブラリについて自分で学習したり、この記事を書いたりするのに役立つリソースをリストしました。

Posted on

コメントを残す

メールアドレスが公開されることはありません。