title: How to have a sidenav with router-outlet and a separate login with router-outlet?
body: <p>I am trying to implement an app with a login page and then when the user is logged in, there would be a navbar, toolbar and sidenav that have a <code>router-outlet</code>.</p>
  <p>Basically, in the <code>app.component.html</code> I have a defined this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;isAuthenticated&quot;&gt;
    &lt;app-custom-navbar&gt;&lt;/app-custom-navbar&gt;
    &lt;app-custom-toolbar&gt;&lt;/app-custom-toolbar&gt;
    &lt;app-custom-sidenav&gt;&lt;/app-custom-sidenav&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>And I have this routing:</p>
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    { path: '', canActivate: [AuthenticationGuard], component: HomeComponent },
    { path: 'login', component: LoginComponent },
    {
      path: 'data',
      canActivate: [AuthenticationGuard],
      component: DataComponent,
    },
    {
      path: 'projects',
      canActivate: [AuthenticationGuard],
      component: ProjectsComponent,
    },
  ];
  </code></pre>
  <p>So, this works well, if the user isn't authenticated, he gets redirected to <code>/login</code>.</p>
  <p>The problem is that when he is authenticated, the sidenav component takes the whole space and then the other components cannot be seen.</p>
  <p>Basically this is the problem:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-sidenav-container class=&quot;sidenav-container&quot;&gt;
    &lt;mat-sidenav&gt;
      &lt;!-- sidenav template... --&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;!-- how can I put my content here and use routing at the same time ? --&gt;
      &lt;!-- &lt;router-outlet&gt;&lt;/router-outlet&gt; --&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  <p>I thought about using aux routes, but then the routes are not user friendly. Instead I would like to keep them simple like:</p>
  <pre><code>http://mywebsite.com/data
  http://mywebsite.com/login
  http://mywebsite.com/projects
  </code></pre>
  <p><strong>EDIT</strong>: The problem is solved now: Basically, I had to setup the routing properly. I needed to add main routing - e.g. login, logout and default route. And then I added my components as children items under the default route, which in my case is an empty '' path. That way my routes look clean and it looks the way I want it. I am editing my post with a link to a working example.</p>
  <p>Here is the URL to: <a href="https://stackblitz.com/edit/angular-yjkbnf" rel="nofollow noreferrer">stackblitz</a></p>