モジュール内のコンポーネントを外部モジュールで利用する方法

Angular では、モジュールごとに機能をまとめて管理することがよくあります。モジュール内のコンポーネントを外部のモジュールで利用する際には、コンポーネントをモジュールの exports に登録しておく必要があります。

例えば、CoreModule に DrawerComponent と HeaderComponent があるとします。これらコンポーネントを AppModule 配下の AppComponent 上で利用するには、次のように CoreModule の exports に DrawerComponent と HeaderComponent を登録しておく必要があります。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawerComponent } from './drawer/drawer.component';
import { HeaderComponent } from './header/header.component';



@NgModule({
  declarations: [DrawerComponent, HeaderComponent],
  exports: [DrawerComponent, HeaderComponent],
  imports: [
    CommonModule
  ]
})
export class CoreModule { }

これにより、AppModule 配下の AppComponent 上で DrawerComponent と HeaderComponent を利用することができるようになります。