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 모듈에서 "다른 하나의 파일 가져 오기"가 모듈이고 여러 파일을 모은 모듈은 없습니다.

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: h tps // s ckb t ... m / 앙구 r / k