Angular 8 Routing a component between header and footer is not shown with no errors at the console

Question

I am having a problem with angular routing.

At the app.component.html we have:

<router-outlet></router-outlet>

And the app-routing.module.ts is like:

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 { }

At the app.module.ts I've imported the LayoutModule.

Now at the layout module, we have 2 components which are <footer> and <header> displayed at the layout.component.html:

<div id="theme_id">
    <app-header></app-header>
    <app-footer></app-footer>
</div>

I need to display the router outlet between them as the following:

<div id="theme_id">
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

So at the layout-routing.module.ts:

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 { }

So when the user clicks to go the query component, I need it to be shown between the header and footer.

The problem is that the query component is being shown alone like the following:

The image above shows that the routing is not working properly.

Answer 1

Mistakes you made in the code which you provided and your explanation in the question

1. No need to include <router-outlet></router-outlet> in both app.component.html and layout-component.html
2. No need to import LayoutModule in AppModule as you're lazily loading
3. HeaderComponent and FooterComponent are common in the entire project so adding only in app.component.html is enough
4. You need QueryOffersModule also to be lazy-loading then why you need to provide it as a children in LayOutModule. Instead of that you can provide it in AppRoutingModule

So your AppRoutingModule will look as follows

<!-- AppRoutingModule -->
const routes:Routes =[{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'home'
  },{
    path: 'home',
    loadChildren: () =>
      import('./layout/layout.module').then(
        m => m.LayoutModule
      )
  },{
    path: 'query',
    loadChildren: () =>
      import('./query-offers/query-offers.module').then(
        m => m.QueryOffersModule
      )
  }]

The following is your app.component.html

<!-- app.componet.html -->
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

I assume there will be query button in layout.component.html or anywhere. On clicking that route to query which laods QueryOffersModule.