Routing zwischen Lazy geladenen Modulen

Question

Ich arbeite an einer App, die zwei Abschnitte hat. Eine öffentliche und private (authentifizierte und nicht authentifizierte) Abschnitte.

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/public/login', 
    pathMatch: 'full' 
    }, { 
    path: 'public', 
    loadChildren: 'app/public/public.module#PublicModule', 
    }, { 
    path: 'private', 
    loadChildren: 'app/private/private.module#PrivateModule' 
    } 
]; 

Dann in PublicModule Ich habe:

Meine Haupt app Routen sind wie so definiert

const publicRoutes: Routes = [ 
    { 
     path: '', 
     component: FullscreenComponent, 
     children: [ 
      { 
       path: 'login', 
       component: LoginComponent, 
      }, 
      { 
       path: 'unlock', 
       component: UnlockComponent 
      } 
     ] 
}]; 

und Art von der gleichen Sache in meinem privaten Modul:

const privateRoutes: Routes = [ 
    { 
     path: '', 
     component: PrivatePageComponent, 
     children: [ 
      { 
       path: 'dashboard', 
       component: DashboardComponent, 
       canActivate: [AuthGuard] 
      }, { 
       path: 'general', 
       component: GeneralComponent, 
       canActivate: [AuthGuard] 
      } 
     ] 
    } 
]; 

Wo ich feststecke ist auf dem Standard-Routing. Wenn der Benutzer / anfordert, hätte ich erwartet, dass dies zu /public/login umleiten würde, aber das tut es nicht. Es bleibt bei /. Wenn ich direkt zu /public/login navigiere, sehe ich, was ich zu sehen erwarte.

Ich bin mir nicht sicher, was ich vermisse.

Ein zweites Problem, das ich habe, ist /public zeigt nicht die /public/login, aber das ist noch nicht wichtig.

Fehle ich etwas darüber, wie Routen hier funktionieren?

Und ein drittes Problem, das ich habe, ist, wenn ich versuche, auf /private/dashboard zuzugreifen, leitet es an / um. Ich nehme an, wenn ich die Umleitung / zur Arbeit bekommen kann, wäre das kein Problem.

Answer 1

Ändern der appRoutes und publicRoutes zu:

AppRoutes

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'public', //<--- Change this route path 
     pathMatch: 'full' 
    }, { 
     path: 'public', 
     loadChildren: 'app/public/public.module#PublicModule', 
    }, { 
     path: 'private', 
     loadChildren: 'app/private/private.module#PrivateModule' 
    } 
]; 

PublicRoutes

const publicRoutes: Routes = [ 
    { 
     path: '', 
     component: FullscreenComponent, 
     children: [ 
      { 
       path: '',    // <--- Add this empty path route 
       redirectTo: 'login' 
      }, 
      { 
       path: 'login', 
       component: LoginComponent, 
      }, 
      { 
       path: 'unlock', 
       component: UnlockComponent 
      } 
     ] 
}]; 

Diese ersten beiden der drei Probleme lösen sollten.