Angular Routing

Angualr routing

App-routing.module.ts Routes forRoot forChild loadChildren

앵귤러 프레임워크에서 라우팅관련해서 자주 접하던 메소드들에 대해서 알아보고 라우팅 path에 대해서도
잠시나마 삽질 했던 부분에 대해서 기억하고자 글을 남깁니다.

기본적으로 앵귤러는 root route module로써 app-routing.module.ts를 사용

<app-routing.module.ts>

const router: Routers = [
  {
    path: work,
    children: [
      {
        path: 'testA',
        loadChildren: () =>
          import('./page/work/work.module').then((m) => m.WorkModule)
      }
    ]
]
...
...
@NgModule({
  imports: [
    RouterModule.forRoot(router, {
      enableTracing: false,
      onSameUrlNavigation: 'reload',
      useHash: false
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

미리 route 경로를 지정해놓고 해당 url과 매칭시 module 혹은 component를 load하는 형태..

loadChildren: () 부분은 지연로딩으로써 work/testA URL로 요청시에만 work.module을
load 하겠다는 뜻

<work.module.ts>

const router: Routes = [
  {
    path: 'test',
    component: WorkComponent,
    resolve: { WorkResolverService }
  }
];
...
@NgModule({
  declarations: [WorkComponent],
  imports: [
    RouterModule.forChild(router)
	...
	]
 })
 ...

work.module이 로드 됐을때 route 경로를 다시 설정하는데.. 위 코드는 work/testA/test URL 요청시 WorkComponent를 화면에 뿌려주겠다는 뜻

• forRoot / forChild 는 무엇일까..?
  forRoot를 사용해 모듈을 로드 하는데 이때 주체는 AppModule이다.
  이외에 다른 서브 모듈에서 forChild를 사용해 모듈을 로드할때도 싱글톤을 유지하게된다. 이말은 즉, forChild를 사용하면 모듈 바인딩 주체가 AppModule이 된다는 것.
  위에서 RouterModule.forChild()를 사용한것도 router모듈을 싱글톤을 유지하기위해 최상위 root모듈에서 바인딩 하도록 하기 위해서이다.