Angular 2 Auxiliary Route funktioniert beim ersten Mal und nicht bei nachfolgenden Klicks

Question

Ich habe Lazy Loaded Routen und Hilfsrouten definiert, wie im folgenden Code gezeigt.

export const MainRoutes = [ 
    { path: '', component: WelcomeComponent }, 
    { path: 'Customer', loadChildren: 'Modules/CustomerModule#CustomerModule' }, 
    { path: 'Supplier', loadChildren: 'Modules/SupplierModule#SupplierModule' }, 
    { 
     path: 'Help', 
     outlet: 'helpoutlet', 
     component: HelpComponent 
    } 
]; 

Unten ist der Code, wo meine anderen Routen und Hilfsrouten aufgerufen werden.

<a [routerLink]="['/Supplier/Add']">Supplier</a> 
<a [routerLink]="['/Customer/Add']">Customer</a><br /> 
<a [routerLink]="[{outlets: {'helpoutlet': ['Help']}}]">Help</a> 

     <router-outlet></router-outlet> 
     <router-outlet name="helpoutlet"></router-outlet> 

Im Folgenden finden Sie Code für Anbieter Routen

export const SupplierRoutes = [ 
    { 
     path: 'Add', component: SupplierComponent 
    } 
]; 

Below-Code für Kunden Routen ist

export const CustomerRoutes = [ 
    { 
     path: 'Add', 
     component: CustomerComponent 

    }  
]; 

Wenn ich zum ersten Mal an den Lieferanten Link navigieren und dann auf auxillary Route (Hilfe) es funktioniert erstes Mal. Aber danach, wenn ich auf Customer und dann auf die Hilfsroute klicke, funktioniert es nicht. Die anderen Routen funktionieren weiter. Hilfsrouten verschwinden einfach vom Bildschirm.

Meine anderen Routen sind faul geladen, ist das Problem?. Stuck wie ein Leim.

Answer 1

Ich versuchte in meiner lokalen Umgebung und es funktioniert gut. Ich denke, dass das Problem mit Ihren faulen Lademodulen ist, Sie laden die Routen im Modul nicht richtig. Ich verwende Lazy Loading und ich denke, das ist nicht das Problem. Ich füge meinen Code an, bitte werfen Sie einen Blick darauf.

app.routes.module.ts

import { NgModule } from '@angular/core'; 
import { AuthUserGuard, ClientSaaSUserGuard } from './app.guards'; 
import { Routes, RouterModule, CanActivate, } from '@angular/router'; 
import { DashboardComponent, LoginComponent, RegistrationComponent, PageNotFoundComponent } from './components/common'; 

const APP_ROUTES: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegistrationComponent}, 
    { path: 'consult', loadChildren:'./modules/consult/consult.module#PmConsultingModule'}, 
    { path: 'saas', loadChildren:'./modules/saas/saas.module#SaasModule'}, 
    { path: 'logAux', component: LoginComponent, outlet: 'topNav' } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(APP_ROUTES) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class MainRoutesModule {}; 

app.component.html

<a [routerLink]="['register']">Register</a> 
<a [routerLink]="['/consult']">Consult</a> 
<a [routerLink]="[{ outlets: { 'topNav': ['logAux'] } }]">Aux</a> 

<router-outlet></router-outlet> 
<div style="color: green; margin-top: 1rem;">topNav bar:</div> 
<div style="border: 2px solid blue; padding: 1rem;"> 
    <router-outlet name="topNav"></router-outlet> 
</div> 

consult.routes.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule, CanActivate, } from '@angular/router'; 
import { PMConsultUserGuard, AdminUserGuard } from './../../app.guards'; 
import { PMDashboardComponent } from './index'; 
import { PmConsultingComponent } from './consult.component' ; 

const PMCONSULTING_ROUTES: Routes = [ 
    { path: '', component: PmConsultingComponent, children: [ 
     { path: 'admin', component: PMDashboardComponent , canActivate: [AdminUserGuard] }, 
     { path: 'pm', component: PMDashboardComponent , canActivate: [PMConsultUserGuard] } 
    ]}, 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(PMCONSULTING_ROUTES) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class PMConsultingRoutesModule {};