Как разделить маршрутизацию на несколько модулей - страницы авторизации и страницы веб-приложений

Question

Я хочу отделить маршрутизацию от страницы входа и всех других страниц от веб-приложения, потому что страница входа должна иметь разную компоновку, чем страницы веб-приложения.

У меня возникли некоторые проблемы с маршрутизацией,из-за двойного 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>