带有惰性子模块的惰性加载模块不使用带有导航栏和 router-outlet 的 AppComponent

Question

目前，我正在尝试创建一个包含两个模块的 Angular 应用程序：mag-app 和 rpdr-fl。

app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './mag-app/mag-app.module#MagAppModule' },
  { path: 'rpdr-fl', loadChildren: './rpdr-fl/rpdr-fl.module#RpdrFlModule' }
];

问题是我如何处理 rpdr-fl 中的路由。我在我的代码中为一些常见的 objects 创建了 sub-modules，包括一个包含 app-header 组件的核心模块。最后，我创建了一个 AppComponent 作为 RPDR-FL 模块的登陆页面。

@NgModule({
imports: [
    CommonModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    NgbModule,
    EffectsModule.forRoot([AppEffects]),
    CoreModule,
    RpdrFLRoutingModule,
    DraftModule,
    DraftRoutingModule,
    LeagueModule,
    LeagueRoutingModule,
    QueensModule,
    QueensRoutingModule,
    TeamModule,
    TeamRoutingModule,
    UserModule,
    UserRoutingModule,
    WeeklyResultsModule,
    WeeklyResultsRoutingModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent,
  ],
  bootstrap: [AppComponent]
})
export class RpdrFlModule { }

rpdr-fl-路由.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'league', pathMatch: 'full' },
  { path: 'draft', loadChildren: './draft/draft.module#DraftModule' , outlet:'approuter' },
  { path: 'league', loadChildren: './league/league.module#LeagueModule',},
  { path: 'team', loadChildren: './team/team.module#TeamModule' },
  { path: 'user', loadChildren: './user/user.module#UserModule' },
  { path: 'meet-the-queens', loadChildren: './queens/queens.module#QueensModule' },
  { path: 'weekly-results', loadChildren: './weekly-results/weekly-results.module#'},
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RpdrFLRoutingModule { }

app.component

@Component({
  selector: 'rpdr-fl-app',
  template: `
<app-header></app-header>
  <router-outlet name="approuter"></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

问题是当我尝试访问 http://localhost:4200/rpdr-fl/league 时，我被带到一个基于 league-routing.module 的组件，这很好，但我没有看到 app-header 组件。有没有办法在使用 ?

导航到各种延迟加载的子模块时拥有一个通用的 NavBar header

编辑： Adding Repo Url

请注意，我最近在 rpdr 模块中创建了 app.component.ts，因此我不会在回购中。

Answer 1

我的解决方案的主要问题（评论中所述的小问题除外）是我如何使用 RPDR-FL 模块组织路线。

已更新app.module.ts

import { AppRoutingModule } from './app-routing.module';
import { RpdrFlModule } from './rpdr-fl/rpdr-fl.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RpdrFlModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

已更新 app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './mag-app/mag-app.module#MagAppModule' },
  //{ path: 'rpdr-fl', loadChildren: './rpdr-fl/rpdr-fl.module#RpdrFlModule' } This path is no longer being used since the RpdrFlModule imported now
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

已更新 rpdr-fl.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { EffectsModule } from '@ngrx/effects';

import { RpdrFLRoutingModule } from './rpdr-fl-routing.module';
import { CoreModule } from './core/core.module';

import { AppComponent } from './app/app.component';
import { PageNotFoundComponent } from './core/containers/page-not-found/page-not-found.component'
import { LoginComponent } from './auth/components/login/login.component';

import { reducers, metaReducers } from './reducers';
import { environment } from '../../environments/environment';
import { AppEffects } from './app.effects';

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    NgbModule,
    EffectsModule.forRoot([AppEffects]),
    CoreModule,
    RpdrFLRoutingModule,
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent,
  ],
  bootstrap: [AppComponent]
})

已更新 rpdr-fl-routing.module.ts

const routes: Routes = [
    { path: 'rpdr-fl', component: AppComponent, children: [
      { path: 'draft-central', loadChildren: './draft/draft.module#DraftModule'},
      { path: 'league', loadChildren: './league/league.module#LeagueModule',},
      { path: 'teams', loadChildren: './team/team.module#TeamModule' },
      { path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'meet-the-queens', loadChildren: './queens/queens.module#QueensModule' },
      { path: 'weekly-results', loadChildren: './weekly-results/weekly-results.module#WeeklyResultsModule'},
      { path: '', redirectTo:'league', pathMatch: 'full'},
      { path: 'login', component: LoginComponent }
    ]
  },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

已更新app.component.ts

@Component({
  selector: 'rpdr-fl-app',
  template: `
  <app-header></app-header>
  <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

所以基本上，我在 RPDR-FL 应用程序中使用 AppComponent 作为 'rpdr-fl' 路线的着陆组件。不幸的是，作为解决方案的一部分，我不得不导入 RPDR-FL 模块而不是延迟加载它（参见 app.module 和 app-routing.module）。希望这对其他人有帮助。

带有惰性子模块的惰性加载模块不使用带有导航栏和 router-outlet 的 AppComponent

Lazily Loaded Module with Lazy Submodules not using AppComponent with navbar and router-outlet

angular

angular-router

router-outlet