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

Question

Currently, I'm trying to create an Angular App with two modules: mag-app and 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' }
];

The issue is how I'm handling the routing within the rpdr-fl. I created sub-modules for a number of common objects with in my code, including a Core Module which contains the app-header component. Lastly, I created a AppComponent to serve as the landing page of the RPDR-FL Module.

@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-routing.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() {
  }
}

The issue is when I try to access, http://localhost:4200/rpdr-fl/league, I'm taken to a component based on the league-routing.module which is fine, but I don't see the app-header component. Is there a way to have a common NavBar header while navigating to various lazily loaded sub modules using the ?

Edit: Adding Repo Url

Note I recently created the app.component.ts within the rpdr module so I will not be in the repo.

Answer 1

The main issue with my solution (other than the minor issues stated in the comments) was how I organizing the routes withing the RPDR-FL module.

Updated 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]
})

Updated 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 { }

Updated 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]
})

Updated 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]
})

Updated 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() {
  }
}

So basically, I'm using the AppComponent within the RPDR-FL app as the landing component for the 'rpdr-fl' route. Unfortunately, as a part of the solution, I had to import the RPDR-FL module instead lazily loading it (see app.module and app-routing.module). Hope this helps others.