概要


前提


JavaScriptモジュールとは

// 例: node_modules/@angular/core/以下でexportされたComponentをインポート
import { Component } from '@angular/core'

以降の、NgModuleのインポートやエクスポート(imports, exports)とは違う


NgModuleとは


ルートモジュールAppModule: src/app/app.module.ts

// AppModuleの初期状態
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

基本的に上記3点は削除せず、必要なものを配列に追加していく。


@NgModuleデコレータに渡すオブジェクト

@NgModule({
  declarations: 配列,
  imports: 配列,
  exports: 配列,
  providers: 配列,
})
export class FooModule { }

declarations配列

宣言クラス


imports配列とexports配列

exports配列

imports配列


例: NgModule階層

  1. XxxModuleがX1Componentを宣言し、exports
@NgModule({
  declarations: [X1Component],
  exports: [X1Component]
})
export class XxxModule { }
  1. YyyModuleがXxxModuleをexports(再エクスポート)
@NgModule({
  exports: [XxxModule] // importsなしに再エクスポート
})
export class YyyModule { }
  1. AppModuleがYyyModuleをimports
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, YyyModule,],
  bootstrap: [AppComponent]
})
export class AppModule { }

NgModule作成コマンド: ng generate module

# YxxModuleを作成し、AppModuleに所属させる場合
PROJECT=hello-angular
name=yyy

ng generate module $name --project $PROJECT --module app
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [CommonModule]
})
export class YxxModule { }

providers配列


Angularが用意したNgModuleの例

ルートモジュール: AppModule(app.module.ts)

標準ライブラリ


ツリーシェイキング


自作するNgModuleの種類

ルーティングモジュール

フィーチャーモジュール

共有モジュール

サービス