Angular 4 default child route Not working

Question

I have angular 4 project with following structure:

src
|- app
|  |- home
|  |  |- home.component.ts/html/scss
|  |  |- home.module.ts
|  |  |- home.routing.ts
|  |  |- products
|  |  |  |- products.component.ts/html/scss
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

My app.routing.module.ts file contains following:

const routes: Route[] = [
{
    path: "home", component: HomeComponent, canActivate: [AppAuthGuard]
  },
  {
    path: '', redirectTo: AppConstants.ROUTE_LOGIN, pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

and home.routing.ts contains following child routs:

{
path: "home",
component: HomeComponent,
children: [
  {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
 ]
}

In home.module.ts child routs has been imported using RouterModule.forChild(HomeRoutes). And there is a router outlet for the child routes in home.component.html. All the routes except for default child route (http://localhost:4200/home) works successfully (http://localhost:4200/home/products works fine). http://localhost:4200/home give out no errors, it just shows empty white space because router outlet is empty. But if I define default child route of home component in app.module.ts it works fine. What did I did wrong for it to not work?

Answer 1

I fix the issue by lazy loading syntax which is loadChildren. and removing the first level configuration. Before that I needed to restructure the code little bit to export the home routing module and import is to home module. Changed file are as below:

home.routing.ts:

const homeRoutes: Route[] = [
{
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
]
}
@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class HomeRoutingModule {}

Then app.routing.module.ts:

const routes: Route[] = [
{
    path: "home", component: HomeComponent,  loadChildren: './home/home.module#HomeModule'
  },
  {
    path: '', redirectTo: "login", pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

And importing HomeRoutingModule at home.module.ts.

Answer 2

Can you try by removing the first level configuration directly like. As you have already routed it to home, it is finding the /home in the /home route, so according to the configuration it become http://localhost:4200/home/home

 [ 
   {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  }
]