Child component is loading under Parent component - Angular

Question

I am trying to load child component in new page when button is clicked but instead it is loading below parent component.

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: SideNavbarComponent
  },
  {
    path: 'application',
    component: ApplicationModuleComponent,
    children:[
      {
        path: 'sgldn',
        component : SgldnEntityComponent,
        children:[
          {
            path:'trademon',
            component:TradeMonitoringComponent
          },
          {
            path:'eod',
            component:EodMonitoringComponent
          }
        ]
      },
      {
        path:'sgparis',
        component : SgpmEntityComponent
      }
    ]
  }
];

side-navbar.component.html

<p>side-navbar works!</p>
<app-home></app-home>

home.component.html

<p>home works!</p>
<button routerLink="/application">APPLICATION</button>
<router-outlet></router-outlet>

application-module.component.html

<p>application-module works!</p>

Please find my component structure - enter image description here

I am expecting to load child component application.component.html in new page. instead it is loading below the parent component when button is clicked.

Home Page

When button is clicked

Answer 1

I think the problem is inside your app-module.html and home.component.html

router-outlet component acts like an "hub" it selects which component to show based on the route so you should put it inside app-module.html that is the main entry point of your angular app.

Beside router outlet, inside app-module.html you should include components that may always be visible like a nav-bar that is always on top of the page no matter which route is active

in the home component.html you should include only the content specific to your home page and remove the router outlet component