如何在多个模块中拆分路由-身份验证页面和Webapp页面

Question

我想将路由与登录页面分开，并将所有其他页面与webapp分开，因为登录页面的布局应与webapp页面不同。

由于双重router-outlet，我在路由方面遇到了一些麻烦 我猜想，因此该应用无法正确构建。如何编写有效的路由？

app.component.html

<div class="wrapper">    
  <app-navigation></app-navigation>    
  <div class="main-panel">    
    <app-navbar-top></app-navbar-top>    
    <router-outlet></router-outlet>    
    <app-footer></app-footer>        
  </div>    
</div>

app.module.ts

export const paths = {
  login: 'login',
  register: 'register',
  match: 'match',
  league: 'league',
  tournament: 'tournament',
  analytics: 'analytics',
  organization: 'organization',
  bugreport: 'bugreport',
  settings: 'settings'
};

const routes: Routes = [
  {
    path: paths.login,
    children: AUTH_ROUTES
  },
  {
    path: paths.register,
    children: REGISTRATION_ROUTES
  },
  {
    path: paths.match,
    children: MATCH_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: paths.league,
    children: LEAGUE_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: paths.tournament,
    children: TOURNAMENT_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: paths.analytics,
    children: ANALYTICS_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: paths.organization,
    children: ORGANIZATION_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: paths.bugreport,
    component: BugReportComponent,
    canActivate: [AuthGuard]
  },
  {
    path: paths.settings,
    children: SETTINGS_ROUTES,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    component: Error404Component
  }
];

@NgModule({
  declarations: [
    AppComponent,
    // Intern components
    FooterComponent,
    NavbarTopComponent,
    NavigationComponent,
    BugReportComponent,
    Error404Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    AngularFontAwesomeModule,
    NgbModule,
    // Intern modules
    HttpClientModule,
    AnalyticsModule,
    AuthenticationModule,
    LeagueModule,
    OrganizationModule,
    MatchModule,
    RegistrationModule,
    TournamentModule,
    SettingsModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
  providers: [ PageTitleService, AuthGuard ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

authentication.modules.ts

@NgModule({
  declarations: [AuthenticateComponent],
  imports: [
    CommonModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AuthenticationModule { }

authentication.component.html

// Only login form

身份验证主要组件应该这样，以便我可以将身份验证和注册组件加载到router-outlet中。

<div class="wrapper">    
    <router-outlet></router-outlet>    
</div>