title: Angular route page successfully but not showed html content
body: <p>When I clicked Home in nav bar it goes to home url but not showed html content
  Here is my app.routing.module.ts</p>
  <pre><code>import { Component, NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  const routes: Routes = [ 
    {path: 'home', component: HomeComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  <p>Here is my app.component.html</p>
  <pre><code>    &lt;nav class=&quot;navbar navbar-expand-md navbar-dark fixed-top bg-dark&quot;&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Fixed navbar&lt;/a&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&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;navbarCollapse&quot;&gt;
            &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-md-0&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link &quot;  routerLink='home' routerLinkActive='active'&gt;Home&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
  &lt;div class = &quot;container&quot;&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;/div&gt;
  
  </code></pre>