Angular Libraries

Angular ライブラリは、統一されたユーザー インターフェイスの提示、データの提示、データ入力の許可などの一般的な問題のソリューションとして構築されています。 開発者は、異なるアプリケーションで再利用するために適応できる、特定のドメインのための一般的なソリューションを作成することができます。 これらのソリューションは、Angular ライブラリとして構築することができ、これらのライブラリは npm パッケージとして公開および共有することができます。

Angular ライブラリは Angular プロジェクトですが、それ自体では実行できないという点で Angular アプリとは異なります。 インポートしてアプリで使用します。

Angularライブラリの利用

• AngularライブラリはAngularの基本機能を拡張するものです。 たとえば、アプリにリアクティブ フォームを追加したい場合、ng add @angular/forms を使用してライブラリ パッケージを追加し、アプリケーション コードで @angular/forms ライブラリから ReactiveFormsModule をインポートします。
• Angular Material は、洗練された、再利用可能で適応性のある UI コンポーネントを提供する大規模な汎用ライブラリの例です。

Installing libraries

Libraries is published as npm package and integrated with Angular CLI. 再利用可能なライブラリのコードをアプリケーションに統合するには、パッケージをインストールし、それを使用するために提供された機能をインポートする必要があります。

Syntax

ng add コマンドは npm パッケージ マネージャーを使用してライブラリ パッケージをインストールし、パッケージに含まれている scaffolding を呼び出して、プロジェクト コード内の他の scaffolding、たとえば import 文、フォント、テーマなどの追加を実行します。

Library typing

Library パッケージは .d.ts ファイルにタイピングを含んでいます。 もしライブラリのパッケージに typings が含まれておらず、IDE がエラーを表示した場合、ライブラリの関連する @types/ パッケージをインストールする必要があります。

たとえば、d1 という名前のライブラリがあるとします。

ワークスペースにインストールされたライブラリ用の @types/ パッケージで定義された型は、そのライブラリを使用するプロジェクトの TypeScript 設定に自動的に追加されます。 TypeScript はデフォルトで node_modules/@types フォルダーにある型を探すので、各型パッケージを個別に追加する必要はありません。

ライブラリーが @types/ に型付けを含んでいない場合でも、手動で型付けを追加して使用できます。

src/フォルダにtyping.d.tsファイルを作成します。 このファイルは、グローバルな型定義として自動的に含まれます。

以下のコードを src/typings.d.ts に追加してください。

ライブラリを使用するコンポーネントまたはファイルに次のコードを追加します:

ライブラリの更新

ライブラリは、ng updateコマンドを使用して更新することができます。 これは、個々のライブラリのバージョンを更新します。 Angular CLIはライブラリの最新の公開リリースを確認し、最新バージョンがインストールしたバージョンよりも新しいと判断した場合、それをダウンロードし、最新バージョンに合うようにpackage.jsonを更新します。

Syntax

注意: Angular を新しいバージョンに更新するとき、使用しているすべてのライブラリが最新であることを確認する必要があります。 ライブラリに相互依存性がある場合、それらも更新する必要があります。

How to add a library to the runtime global scope

Legacy JavaScript libraries that are not imported into an app can be added to the runtime global scope and load as if they were in a script tag. これを行うには、CLI 設定ファイル angular.json のビルド ターゲットの “scripts” と “styles” オプションを使用して、ビルド時に CLI を設定する必要があります。

たとえば、Bootstrap 4 ライブラリを使用するには、最初に npm パッケージ マネージャーを使用してライブラリとその依存関係をインストールします。

Bootstrap CSS ファイルを “styles” 配列に追加する:

Creating new libraries

独自の新しいライブラリを作成して公開することにより、Angular 機能を拡張することができます。 これは一般に、複数のアプリで同じ問題を解決する必要がある場合 (または、解決策を他の開発者と共有したい場合)、ライブラリの候補がある場合に使用されます。 たとえば、あなたの会社が構築するすべてのアプリに含まれる、ユーザーをあなたの会社の Web サイトに送るボタンを作成できます。

Angular CLI を開き、次の構文を使用して新しいライブラリを作成します。Syntax

これにより、ワークスペースに projects/my-lib フォルダーが作成され、NgModule 内にコンポーネントとサービスが格納されます。 ワークスペース設定ファイル angular.json は、タイプ ‘library’ のプロジェクトで更新されます。

さて、次のコマンドを使用して、プロジェクトをビルド、テスト、および lint できます。