Comment route d'erreur de chargement paresseux avec itinéraire enfant en Angulaire?

Question

Plunker: https://plnkr.co/edit/GyUApIPQzTvp9vIahYdT?p=preview

J'ai installé des itinéraires comme celui-ci dans app.module:

const routes = [ 
    { 
    path: '', 
    component: DummyComponent 
    }, 

    { 
    path: '', // is this right? 
    component: SingleComponent, 
    children: [ 
     { 
     path: '**', // is this right? 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    } 
]; 

Et lazy.module je

const routes = [ 
    { 
    path: '**', // is this right? 
    component: LazyComponent 
    } 
]; 

Le problème est que SingleComponent (le modèle de page) est en fait en train de charger , mais le contenu de la page (LazyComponent) ne se charge pas. (Cliquez sur notfound lien pour voir le résultat dans Plunker)

Comment dois-je configurer cette façon SingleComponent (le modèle) et LazyComponent (le contenu) charge montrant correctement la page?

Note: Ce LazyComponent est censé être une page d'erreur, donc je veux attraper tous les itinéraires (/notfound, /invalid-url, /<anything that doesn't exist in router>)

Answer 1

Ce que vous faites ici est l'appel de la/factice et/NOTFOUND itinéraires.

<a routerLink="/dummy">dummy</a> 
<a routerLink="/notfound">notfound</a> 

Et dans votre définition d'itinéraires, vous n'avez pas défini ces routes. Ce que vous pouvez faire est:

const routes = [ 
    { path: '', redirectTo: '/dummy', pathMatch: 'full' }, 
    { 
    path: 'dummy', 
    component: DummyComponent 
    }, 

    { 
    path: 'notfound', 
    component: SingleComponent, 
    children: [ 
     { 
     path: '', 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    } 
]; 

La première ligne va rediriger vers la route fictive si vous laissez une route vide. Ce dont vous n'avez pas besoin, c'est le caractère générique ** dans ce cas précis. J'espère que cela aide et que j'ai compris votre problème.

Answer 2

J'ai trouvé une façon de faire, l'inconvénient est que cela change l'URL:

routes App:

const routes = [ 
    { 
    path: '', 
    component: DummyComponent 
    }, 

    { 
    path: '', 
    component: SingleComponent, 
    children: [ 
     { 
     path: 'error', 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    }, 

    { path: '**', redirectTo: 'error' }, 
]; 

itinéraires Lazy:

const routes = [ 
    { 
    path: '**', 
    component: LazyComponent 
    } 
]; 

Plunker https://plnkr.co/edit/xktoV02EoGjPNwrW2VjR?p=preview