How to configure routing in angular 4 so that feature-modules routes will come in order as children?

Question

Project structure:

 /app
   app.module.ts
   app.routing.ts
   :
   :
   /dashboardModule
   /manage-productModule  
      manage-product.module.ts
      manage-product.routing.ts

In 'app.routing.ts'

[
  {
   path : '',
   loadchildren: 'loginModulepath/loginmoduleName#className'
  },
  {
   path : 'dashboard',
   component: dashboardReportComponent
  }
  {
   path : 'manage-products'
   loadchildren: 'manage-productModule-path/manage-product-moduleName#manageProductClassName'
  }
]

In the module: manage-products/ manage-product.routing.ts

 const manageProdRoute =
 [
  {
   path : '',
   component: manageProductListComponent
  },
  {
   path : 'detail',
   component: manageProdDetailComponent
  }
 ]

And,

 import:[ routerModule.forChild(manageProdRoute)]

Goal:

If user types url:port/ => it will redirect to url:port/login/ If user types/ click on link to go url:port/manage-products => it will load manageProductListComponent

Problem

But when I'm trying to load URL:port to go to login page instead it loads manageProductListComponent. Even if I comment out manage-product section from app.routing.ts it behaves the same but if I mention all the children of all modules in detail in app.routing.ts then it works properly.

Question What I need to do to keep all the module-based routing in individual routing.ts and import them in app.routing.ts so that they work in order?

Answer 1

You can use the following code sample :-

[
{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', 
   children: [
        { path: '', component: yourLoginComponent},
        { path: 'dashboard', component: your-dashboardReportComponent},      
   ]
},
{ path: 'manage-products', 
   children: [
        { path: '', component: your-manageProdDetailComponent},           
   ]
},
];

you have given empty pathmatch as manageProductListComponent which cause problem

{
   path : '',
   component: manageProductListComponent
 },