Angular 6 child components don't open inside LayoutComponent

Question

I want HomeComponent to be a child component that opens inside a layout template (inside the router-outlet tag of LayoutComponent). I'm not getting any errors and the home page loads fine. It's just not inside the layout.

Here's a snippet of app.module.ts:

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: false, initialNavigation: 'enabled' }),
...

Here's the start of the main app routes. HomeComponent is in PagesModule:

export const appRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: '../app/pages/pages.module#PagesModule',
      }
    ]
  },
...

pages.routing.ts:

export const PageRoutes: Routes = [
 // { path: '', component: HomeComponent }, // tried this too
  {
    path: '',
    component: LayoutComponent,
    children: [
      {  path: '', component: HomeComponent }
    ]
  }
];

pages.modules.ts:

... 
@NgModule({
  imports: [
    CommonModule,
    JsonpModule,
    AppCommonModule,
    RouterModule.forChild(PageRoutes)
  ],
  exports: [ ],
  declarations: [ HomeComponent ]
})
export class PagesModule { }

thx for the comment. you inspired me to use a simpler test template and it led me to the solution. I was actually loading the template twice. — beachCode

beachCode beachCode · Accepted Answer · 2018-07-19T19:19:12

It turns out I was loading the template twice.

I changed the reference in the main appRoutes to remove the template:

  {
    path: '',
    loadChildren: '../app/pages/pages.module#PagesModule',
  },

And for testing sake, I changed the entire LayoutComponent template HTML toL

<p>it works</p>
<router-outlet></router-outlet>

Angular 6 child components don't open inside LayoutComponent

1 Answers