1. 프로젝트 셋업

221229 - TIL 에서 진행한 프로젝트 기반으로 작성

2. 라우팅 구조

ng generate module home --route home --module app.module
ng generate module user --route user --module app.module
ng generate component user/user-info

AppModule
	│
(routing)
	│
	├── HomeModule
	│
	│
	└── UserModule
		│
    	└── UserInfoComponent

3. component.html, module.ts

App Module

# app.component.html

<h1>App Component</h1>
<router-outlet></router-outlet>

# app-routing.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
  },
];

Home Module

# home/home.component.html

<h1>Home Component</h1>
<button (click)="onClick()">로그인버튼</button>

# home-routing.module.ts

const routes: Routes = [{ path: '', component: HomeComponent }];

User Module

# user/user.component.html

<h1>User Component</h1>
<app-user-info></app-user-info>

# user-routing.module.ts

const routes: Routes = [{ path: '', component: UserComponent }];

# user/user-info/user-info.component.html

<h1>User Info Component</h1>

4. 출력 화면

• / -> /home 으로 리다이렉션
  

• /user
  

구현 코드

https://github.com/kimphysicsman/TIL-230102/

참고

https://angular.kr/guide/lazy-loading-ngmodules