title: Angular Second Layer Navigation dispear after click on link
body: <p>I have two layer navbar and the app is using Lazy loading, but every time I clcik on Team Management button the component is working but the Admin Panel navbar is dispear:
  <a href="https://i.stack.imgur.com/QYQxA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QYQxA.png" alt="enter image description here" /></a></p>
  <p>Here is my <em><strong>admin-routing.module.ts:</strong></em></p>
  <pre><code>const routes: Routes = [
    { path: '', component: AdminComponent },
    {
      path: 'team',
      loadChildren: () =&gt; import('./team/team.module').then((m) =&gt; m.TeamModule),
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  })
  export class AdminRoutingModule {}
  </code></pre>
  <p>Here is HTML for the <em><strong>admin.component.html</strong></em>:</p>
  <pre><code>&lt;div&gt;
    &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light mb-3&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Admin Panel&lt;/a&gt;
        &lt;button
          class=&quot;navbar-toggler&quot;
          data-toggle=&quot;collapse&quot;
          data-target=&quot;#team-navbarNav&quot;
        &gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;team-navbarNav&quot;&gt;
          &lt;ul class=&quot;navbar-nav&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;/team&quot; routerLink=&quot;team&quot;
                &gt;Team Management&lt;/a
              &gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;&quot;&gt;Others&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>Here is the result of after click on <em><strong>Team Management button:</strong></em></p>
  <p><a href="https://i.stack.imgur.com/4OvLF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4OvLF.png" alt="enter image description here" /></a></p>
  <p>As you can see the second navbar is gone, I do set up</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt; 
  </code></pre>
  <p>in admin.component.html, but it feels like never works..</p>
  <p>team is the sub component of admin.</p>
  <p><em><strong>admin-routing. module.ts:</strong></em>
  <a href="https://i.stack.imgur.com/ctwEU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ctwEU.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/lfWVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfWVX.png" alt="enter image description here" /></a></p>
  <p>Here is my Github repo:</p>
  <pre><code>https://github.com/qwe3804132/BusyQA-CRM/tree/main/CRMFrontEnd
  </code></pre>
  <p>any suggestions?</p>