Comment configurer le routage dans l'angle 4 de manière à ce que les routes de modules de fonctions apparaissent dans l'ordre des enfants?

Question

Structure du projet:

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

Dans 'app.routing.ts'

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

Dans le module: gestion-produits/gestion-product.routing.ts

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

Et ,

import:[ routerModule.forChild(manageProdRoute)] 

Objectif:

Si les types d'utilisateurs url:port/ => il redirigera à url:port/login/ Si les types d'utilisateurs/cliquez sur le lien pour aller url:port/manage-products => il charge manageProductListComponent

Problème

Mais quand J'essaie de charger URL:port pour aller à la page de connexion à la place il charge manageProductListComponent. Même si je commente la section manage-product de app.routing.ts il se comporte de la même manière mais si je mentionne tous les enfants de tous les modules en détail dans app.routing.ts alors cela fonctionne correctement.

Question Ce que je dois faire pour garder tout le routage basé sur des modules en individuel routing.ts et de les importer dans app.routing.ts afin qu'ils travaillent pour?

Answer 1

Vous pouvez utiliser l'exemple de code suivant: -

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

vous avez donné pathmatch vide comme manageProductListComponent qui causent problème

{ 
    path : '', 
    component: manageProductListComponent 
},