ng-packagrによるビルド

TypeScript やテンプレートをそのまま公開することはできません。利用者はコンパイル済みの標準化された出力を必要とします。Angular ライブラリは、CLI が内部で使用するツールである ng-packagr を使って Angular Package Format (APF) にビルドします。

APF は、配布可能な Angular ライブラリの公式構成です。最適化された ES モジュール、型定義、メタデータが、どの Angular アプリからでもライブラリを確実に利用し、tree-shaking できる形で配置されます。

ライブラリプロジェクトを対象に ng build を実行します。CLI が ng-packagr を呼び出し、パッケージ化された出力を dist/ に書き出します。

dist フォルダーには、コンパイル済みの FESM（flattened ES module）バンドル、.d.ts 型ファイル、そして module と types のエントリフィールドが正しく設定された生成済みの package.json が含まれます。

各ライブラリには ng-package.json があり、出力先とエントリファイルを ng-packagr に指示します。CLI はビルド中にこのファイルを読み込みます。

完全な最適化を有効にするには、プロダクション設定でビルドします。公開するのはこの出力なので、必ず最適化されたバージョンをパッケージ化してください。

ライブラリは完全にコンパイルするのではなく、partial Ivy モードでコンパイルします。これにより Angular のバージョン間で互換性を保てます。利用側のアプリが自身のビルド中にコンパイル（リンク）を完了します。

ng-packagr は Angular やその他の peer dependency をバンドルせず、外部依存として扱います。生成される package.json にはそれらが peerDependencies として記載されるため、利用側が共有コピーを 1 つ提供します。

スタイルや静的アセットをパッケージに含めることができます。ng-package.json で宣言すると、ng-packagr がそれらをコピーして処理し、利用者向けの dist 出力に含めます。

ビルド後に dist/ui-kit を確認します。FESM バンドル、.d.ts ファイル、そして exports/module フィールドがビルド済みファイルを指している package.json が存在することを確認してください。これが npm に公開されるものです。

--watch を追加すると、編集時に自動で再ビルドできます。デモアプリと組み合わせることで、ライブラリ開発中のフィードバックループを高速化できます。

Angular ライブラリはどの形式にビルドされますか？

ng build <lib> でライブラリをビルドすると、ng-packagr が実行され、Angular Package Format（FESM バンドル、.d.ts、生成済みの package.json）が dist/ に出力されます。ng-package.json で出力を設定し、プロダクションでビルドし、バージョン間の互換性には部分コンパイルを利用し、peer dependency は外部のままにしてください。