Angular 8, Lazy loading both parent and child components as default route

Question

I have the following routing code:

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: 'landing',
    pathMatch: 'full'
  },
  {
    path: 'landing',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/landing/landing.module#LandingModule'
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'landing'
  }
];

The thing to note here is that the LandingModule is the child of the parent, which is the AdminLayoutComponent.

If I type in the full URL ( http://mypage.com/landing ), I get the "full page". In other words, the AdminLayoutComponent is rendered, as is the child, LandingModule.

HOWEVER, if I just enter the site's root URL ( http://mypage.com ), and allow the redirectTo to load the /landing page, then the only thing that renders is the LandingModule, NOT the parent AdminLayoutComponent.

Any thoughts on why this is happening, or how to fix it?

Answer 1

I don't know exactly what is going on in your example, but this is the approach I'm taking in my projects (applied to your scenario):

export const AppRoutes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      { path: 'landing', loadChildren: './pages/landing/landing.module#LandingModule' },
      { path: '', redirectTo: "landing", pathMatch: "full" }
    ]
  },
  {
    path: '**',
    redirectTo: 'landing'
  }
];

Hope this helps.

Answer 2

export const AppRoutes: Routes = [
  {
    path: '',
    loadChildren: './pages/landing/landing.module#LandingModule'
  },

];

in landing-routing.module

  {
      path: "",
      component: landingComponent
    },

try this