Angular 3. Routing 구성하기(lazy-loading: 지연 로딩)

1. Angular lazy-loading: 지연로딩

• Angular는 NgModule을 모두 즉시 로딩됩니다.
• 사용 여부 관계없이 app에 선언된 NgModule을 모두 로딩시키는 거죠.
• 볼륨이 큰 workspace나 라우팅 규칙이 복잡하게 구성된 앱일 경우 앱 초기 실행 시간이 길어집니다.
• 그럴 때, 지연 로딩을 통해 초기 실행에 필요한 모듈만 로딩하고, 당장 사용하지 않는 모듈은 사용할 때 로딩하는 방식으로 구성할 수 있습니다.
• 자세한 내용은 아래 Angular 가이드 문서를 참고해보세요.
• https://angular.kr/guide/lazy-loading-ngmodules

Angular 가이드

 

 

 

2. lazy-loading 선언 방법

• Before

const routes: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: 'main', component: MainComponent},
];

 

• After (lazy-loading 적용)

const routes: Routes = [
  {
    path: 'main',
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  }
];

 

• Angular 8 이전 버전

const routes: Routes = [{
    path: 'main',
    loadChildren: './main/main.module#MainModule',
  }];

 

• Angular 8 이전 버전에서는 loadChildren 선언 방식이 다릅니다.
• 버전 확인 후 lazy-loading 설정해주시길 바랍니다.
• Angular 8 이전 버전에서도 import 방식을 설정할 수 있다니 아래 문서를 참고해 설정해주세요.
• 관련 문서 : https://angular.kr/guide/deprecations#loadchildren-string-syntax

Angular 가이드

 

 

 

3. lazy-loading 적용하기

main.component.html

• header, footer, left-menu는 고정이다.
• 메뉴를 클릭할 때마다 <app-content></app-content> 에 화면을 표시해줄 것이다.

 

• content html, css 파일 삭제
• content.component.ts

@Component({
  selector: 'app-content',
  template: '<router-outlet></router-outlet>'
})
export class ContentComponent {

}

• <router-outlet></router-outlet> 코드는 Angular가 화면을 전환할 때 관련 컴포넌트가 표시될 위치를 지정하는 앨리먼트이다.
• 라우팅 된 화면은 <router-outlet> 코드 아래에 위치하게 된다.

 

• app-routing.module.ts

const AppRoutes: Routes = [
  {path: '', loadChildren: () => import('./main/main.module').then((m) => m.MainModule), }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• path: '' -> 첫 화면 로딩 설정

 

• app.module.ts

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

 

• main-routing.module.ts 파일 생성

const MainRoutes: Routes = [
  {
    path: '', 
    component: MainComponent,
    children: [
      {path: 'dashboard', loadChildren: () => import('../dashboard/dashboard.module').then((m) => m.DashboardModule), }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(MainRoutes)],
  exports: [RouterModule]
})
export class MainRoutingModule {
}

• main routing 파일은 app routing 파일을 복사해 수정해줬습니다.
• ng g module main --routing
• 위 명령어를 실행하면 main module 파일과 main routing module 파일이 생성됩니다.
• module 파일이 이미 존재하기 때문에 오류 메시지가 출력되어 수동으로 생성해줬습니다.
• routing만 생성하는 명령어가 따로 존재하는지 검색으로는 나오지 않네요.

 

• main.module.ts

@NgModule({
  declarations: [
    MainComponent,
    HeaderComponent,
    LeftMenuComponent,
    ContentComponent,
    FooterComponent
  ],
  imports: [
    CommonModule,
    MainRoutingModule
  ]
})
export class MainModule { }

 

• dashboard.module.ts 생성
• dashboard-routing.module.ts 생성

ng g module dashboard --routing

 

• dashboard-routing.module.ts

const DashboardRoutes: Routes = [
  {path: '', component: DashboardComponent}
];

@NgModule({
  imports: [RouterModule.forChild(DashboardRoutes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

 

• dashborad component 생성

ng g component dashboard

 

• 여기까지 결과 화면

localhost:4200

 

• 생성한 dashboard 화면으로 라우팅 해주겠습니다.
• main-routing.module.ts

const MainRoutes: Routes = [
  {
    path: '', 
    component: MainComponent,
    children: [
      {path: 'dashboard', loadChildren: () => import('../dashboard/dashboard.module').then((m) => m.DashboardModule), },
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'} ////이 부분 추가
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(MainRoutes)],
  exports: [RouterModule]
})
export class MainRoutingModule {
}

• 추가된 코드는 url path에 아무것도 없다면 dashboard로 redirect 하라는 것입니다.

 

• 결과 화면

localhost:4200

• dashboard worlks! 가 떴네요.
• localhost:4200 으로 접속하면 자동으로 localhost:4200/dashboard로 라우팅 된 걸 볼 수 있습니다.

 

• 지금은 단순하게 dashboard로 라우팅을 해줬지만, 로그인 기능이 있다면 로그인 여부 체크를 통해 로그인 화면과 dashboard 화면으로 나타내 줄 수도 있을 것 같습니다.
• 추가적으로 메뉴가 생긴다면 메뉴 화면을 띄워줄 수도 있겠네요.

 

• component가 많다면 화면 로딩하는데 모든 모듈을 로딩하기에 시간이 오래 걸릴 수 있지만,
• 지연 로딩을 통해 필요한 모듈만 로딩해 시간을 단축시킬 수 있습니다.

 

• 볼륨이 큰 프로젝트가 구축이 됐다면 시간 차이를 느낄 수 있을지도 모르겠습니다.