69. NgModule — スタンドアロン以前のアプリの骨組み

ここからのセクションは、これまでと目的が少し違います。書けるようになるためではなく、読めるようになるためのレッスンです。スタンドアロンコンポーネントが標準になる前、Angularには長い「NgModule時代」があり、現場で動いている既存コードや検索で出てくる記事の多くは、いまもその時代の書き方です。まずはその中心にあるNgModuleから読み解きます。当時は、コンポーネントもパイプもサービスも、必ずどこかのNgModuleに登録しないと使えませんでした。

@NgModule デコレータを付けたクラスがモジュールです。読み方のコツは4つの配列に注目すること。declarations は「このモジュールが所有するコンポーネント・ディレクティブ・パイプ」、imports は「他のモジュールから機能を借りる」、providers は「DIに登録するサービス」、exports は「他のモジュールへ貸し出すもの」です。あるコンポーネントがテンプレートで使っている部品の出どころを探すときは、自分が declarations されているモジュールの imports をたどる、というのが基本の追跡ルートになります。

スタンドアロンとの対応も押さえましょう。standalone なコンポーネントの imports 配列は、NgModule が担っていた「使う部品の宣言」を各コンポーネントが自分で持つようにしたものです。移行中のプロジェクトでは両者が混在し、NgModule 側から standalone コンポーネントを imports することもその逆もできます。「declarations に見つからない部品は standalone かもしれない」と知っていれば、混在コードでも迷子になりません。