title: Angular 8 Routing a component between header and footer is not shown with no errors at the console
body: <p>I am having a problem with angular routing. </p>
  
  <p>At the <code>app.component.html</code> we have: </p>
  
  <p><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code></p>
  
  <p>And the <code>app-routing.module.ts</code> is like:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  
  const routes: Routes = [
    { path: '', loadChildren: './layout/layout.module#LayoutModule' },
    { path: 'home', loadChildren: './layout/layout.module#LayoutModule'},
    { path: '**', redirectTo: 'home', pathMatch: 'full'}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>At the <code>app.module.ts</code> I've imported the <code>LayoutModule</code>.</p>
  
  <p>Now at the layout module, we have 2 components which are <code>&lt;footer&gt;</code> and <code>&lt;header&gt;</code> displayed at the <code>layout.component.html</code>:</p>
  
  <pre><code>&lt;div id="theme_id"&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to display the <code>router outlet</code> between them as the following:</p>
  
  <pre><code>&lt;div id="theme_id"&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So at the <code>layout-routing.module.ts</code>:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { LayoutComponent } from './layout.component';
  
  
  const routes: Routes = [
    { path: '', component: LayoutComponent },
    { path: 'query', loadChildren: './query-offers/query-offers.module#QueryOffersModule' }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class LayoutRoutingModule { }
  </code></pre>
  
  <p>So when the user clicks to go the query component, I need it to be shown between the header and footer.</p>
  
  <p>The problem is that the <code>query</code> component is being shown alone like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/RuP0r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RuP0r.png" alt="enter image description here"></a></p>
  
  <p>The image above shows that the routing is not working properly.</p>