Angular Shared Module 생성으로 Module 공유하기(공통 Module)

Angular 사용하다 보면 중복으로 선언하게 되는 Module이 있습니다.

예를 들어 Angular의 material 의 <mat-table> 사용 시 module마다 MatTableModule 을 선언해줘야 하죠.

 

Java의 공통으로 사용하는 Method를 모아둔 공통 함수 파일이나, 공통 컬럼을 선언해둔 DTO처럼

Angular에서도 공통 Module을 만들어 해당 Module만 선언한다면,

가독성 뿐 아니라 일일이 Module을 찾아 선언해주는 시간도 줄일 수 있습니다.

 

• NgModule 상세

@NgModule({
  // 정적 설정. 이 내용은 컴파일러와 관련된 내용입니다.
  declarations: [], // 셀렉터를 설정합니다.

  // 런타임 설정, 인젝터 설정
  providers: [], // 모듈이 실행될때 사용하는 인젝터를 설정합니다.

  // 그룹화
  imports: [], // 이 모듈이 사용하는 외부 NgModule을 등록합니다.
  exports: [] // 모듈의 구성요소를 모듈 외부로 공개할 때 사용합니다.
})

 

• exports에 선언되는 구성요소에는 module 뿐 아니라 component 등 공유하고 싶은 구성요소 모두 올 수 있습니다.

 

 

 

1. shared module 생성하기

ng g module shared

 

2. 공유할 module 선언하기

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  exports: [
    MatTableModule, ////공유할 module 선언
    MatPaginatorModule ////공유할 module 선언
  ]
})
export class SharedModule { }

 

 

 

3. 사용할 module에 shared module 선언하기

• After

@NgModule({
  declarations: [
    BoardComponent,
    BoardListComponent,
    BoardDetailComponent,
    BoardEditComponent
  ],
  imports: [
    CommonModule,
    BoardRoutingModule,
    SharedModule ////공유 module
  ]
})
export class BoardModule { }

 

• Before

@NgModule({
  declarations: [
    BoardComponent,
    BoardListComponent,
    BoardDetailComponent,
    BoardEditComponent
  ],
  imports: [
    CommonModule,
    BoardRoutingModule,
    MatTableModule, ////공유 module로 이동
    MatPaginatorModule ////공유 module로 이동
  ]
})
export class BoardModule { }

 

 

 

https://angular.kr/guide/sharing-ngmodules

Angular 가이드