NgModule / Angular勉強会 #2

NgModuleについて

• Angularは NgModule と呼ばれるモジュールシステムによってモジュール化されている
  • 似通った機能をモジュール化してまとめておくことがベストプラクティスとなる
  • 他のモジュールをインポートしたり、他のモジュールに公開する機能をエクスポートできる
• すべてのAngularアプリは AppModule と呼ばれるルートモジュールを持つ
  • app.module.ts という名前で定義される

---

NgModuleのメタデータ

• 他のAngularの要素と同じく、＠NgModule デコレータによって定義され、いくつかのメタデータを持つ
  • declarations: モジュールに属するView要素（componentなど）
  • exports: declarationsのうち他モジュールに公開できるもの
  • providers: このNgModuleが公開するサービスを提供するクラス群
  • bootstrap: 起動時に表示するcomponent（ルートコンポーネント）を指定する

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

---

ES2015のモジュールとNgModule

• ES2015のモジュールとNgModuleは全く違う概念
• ES2015モジュールでは、「別の1ファイルをインポートすること」がモジュールで、複数ファイルを纏めたモジュールというのは存在しない
• NgModuleはES2015よりもさらに大きな塊をモジュール化していると言える
  • 当然内部的にES2015モジュールは活用されている

---

NgModule の遅延ロード

NgModule のインポートは一般的にはコンパイル時に解決される。すなわち、生成されるindex.jsファイルにすべてのインポートされたモジュールが含まれることになる。しかしこれにはindex.jsが肥大化し、初期ロード時間が長くなってしまうというデメリットもある。

そこで、特定のパスに遷移したときに初めて読み込まれる、という手法で、初期インポートされるモジュールの肥大化を防ぐことができる。

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
];

---

実際のモジュールを見てみよう

• Demo: https://stackblitz.com/angular/klejyjnynjj