Angular Router 앵귤러 라우터 작성 방법

import { Routes } from '@angular/router';
import { DashboardPage } from './pages/dashboard/dashboard.page';
import { BranchPage } from './pages/branch/branch.page';
import { EmployeePage } from './pages/employee/employee.page';
import { OrderPage } from './pages/order/order.page';
import { FaqPage } from './pages/faq/faq/faq.page';
import { OneOnonePage } from './pages/oneOnone/one-onone/one-onone.page';
import { MenuPage } from './pages/menu/menu/menu.page';
import { CreatePage } from './pages/menu/menu/create/create.page';
import { OptionPage } from './pages/menu/menu/option/option.page';
import { NoticePage } from './pages/notice/notice/notice.page';
import { StatisticsPage } from './pages/statistics/statistics/statistics.page';
import { AdminPage } from './pages/admin/admin/admin.page';
import { InventoryPage } from './pages/inventory/inventory/inventory.page';
import { RequestPage } from './pages/inventory/inventory/request/request.page';


export const routes: Routes = [
  {
    path: 'dashboard',
    children:[
      {path: '', component: DashboardPage},
    ]
  },
  {
    path: 'order',
    children: [
      {path: '', component: OrderPage},
    ]
  },
  {
    path: 'oneOnone',
    children: [
      {path: '', component: OneOnonePage},
    ]
  },
  {
    path: '',
    children: [
        {path: 'inventory', component: InventoryPage},
        {path: 'request', component: RequestPage},
      ],
  },
  {
    path: 'branch',
    children: [
      {path: '', component: BranchPage},
    ]
  },
  {
    path: 'employee',
    children: [
      {path: '', component: EmployeePage},
    ]
  },
  {
    path: '',
    children: [
      {path: 'menu', children: [
        {path: '', component: MenuPage},
        {path: 'create', component: CreatePage},
        {path: 'option', component: OptionPage}, 
      ]},
    ]
  },
  {
    path: '',
    children: [
      {path: 'faq', component: FaqPage},
    ]
  },
  {
    path: '',
    children: [
      {path: 'notice', component: NoticePage},
    ]
  },
  {
    path: '',
    children: [
      {path: 'statistics', component: StatisticsPage},
    ]
  },
  {
    path: '',
    children: [
      {path: 'admin', children: [
        {path: '', component: AdminPage},
        {path: 'form', loadComponent: () => import('./components/modal-content/modal-content.component').then(m => m.ModalContentComponent)}
      ]},
    ]
  },
];

 1. 자식요소가 있는 경우 부모 요소는 메뉴를 펼치기만 하도록 하기

2. 자식요소가 있는 경우 부모 요소에서는 path 를 넣지 않고 자식에서 path, component 설정하기

3. 이벤트 동작 시 열어야 할 페이지만 그때 그때 import 하도록 하기