title: Nested Routing in Angular
body: <p>This maybe a common question and if there are better answers please point me towards it. That being said, here's the issue:</p>
  <p>On the top level, the angular app I am developing exposes a login path and paths to 4 separate dashboards depending on who logs in. This part is working as expected.</p>
  <p>For each dashboard, I have a side navigation that is more or less same (some options are only shown for certain types of user). In the dashboard, I have a nested router outlet. Whenever I try to load a module inside the nested outlet, Angular can't match the path. Here's what I have so far:</p>
  <p>app-routing.module.ts</p>
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'login' },
    { path: 'login', loadChildren: () =&gt; import('./modules/auth/auth.module').then(m =&gt; m.AuthModule) },
    //{ path: 'dashboard', loadChildren: () =&gt; import('./modules/dashboard/dashboard.module').then(m =&gt; m.DashboardModule) }
    { path: 'admin', loadChildren: () =&gt; import('./modules/admin/admin.module').then(m =&gt; m.AdminModule) },
  ];
  </code></pre>
  <p>admin-routing.module.ts</p>
  <pre class="lang-js prettyprint-override"><code>
  const routes: Routes = [
    { path: '', pathMatch: 'full', component: AdminComponent, children: [
      { path: 'employee', loadChildren: () =&gt; import('./../employee/employee.module').then(m =&gt; m.EmployeeModule) },
      { path: 'attendance', loadChildren: () =&gt; import('./../attendance/attendance.module').then(m =&gt; m.AttendanceModule) },
      { path: 'customer', loadChildren: () =&gt; import('./../customer/customer.module').then(m =&gt; m.CustomerModule) },
      { path: 'order', loadChildren: () =&gt; import('./../order/order.module').then(m =&gt; m.OrderModule) },
      { path: 'expense', loadChildren: () =&gt; import('./../expense/expense.module').then(m =&gt; m.ExpenseModule) },
    ]},
  ];
  </code></pre>
  <p>app.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>admin.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-drawer-container mode=&quot;side&quot; id=&quot;dashboard-drawer-container&quot; hasBackdrop=&quot;false&quot;&gt;
    &lt;mat-drawer #drawer id=&quot;sidenav-container&quot;&gt;
      &lt;app-sidenav&gt;&lt;/app-sidenav&gt;
    &lt;/mat-drawer&gt;
    &lt;div id=&quot;dashboard-container&quot;&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/mat-drawer-container&gt;
  </code></pre>
  <p>Now the expected behavior is as follows:</p>
  <ol>
  <li>When navigated to /admin, the AdminComponent will be rendered and the sidenav will be visible</li>
  <li>When a link is clicked on the sidenav, the content should be rendered in the nested router in the admin component (for example, admin/employee)</li>
  <li>When other routes are accessed inside the module loaded in (2), it should be rendered inside an outlet in that module (for example, admin/employee/:id) for employee detail page where, employee module has a nested router</li>
  </ol>
  <p>I tried with named outlets and it kept throwing error. If I move the children out of admin routes and make them independent routes, it kind of works but, the content is rendered on the outermost (app) router outlet and the sidenav is not rendered.</p>
  <p>Any help or suggestion will be greatly appreciated.</p>