Child routes not working - overriding parent route Angular 6

Question

I have a core module that has a layout component which includes a toolbar module and sidenav module. I then have a map module I want to be a child of the layout module so the html should look something like:

<root>
  <layout>
    <sidenav></sidenav>
    <toolbar></toolbar>
    <map></map>
  </layout>
</root>

I have tested all modules separately and they work but when I look at the html, it looks like this instead of above:

<root>
  <map></map>
</root>

It looks like the map module just overrides everything. If I change up the routes and only have the layout, I can see the toolbar and sidenav work and look like this:

<root>
  <layout>
    <sidenav></sidenav>
    <toolbar></toolbar>
  </layout>
</root>

So it doesnt seem to be an error in any of the modules themselves. The nested routing just doesnt seem to be working

the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './core/layout/layout.component';

const routes: Routes = [{
   path: '',
   component: LayoutComponent,
   children: [{
    path: '',
    loadChildren: 'app/map-feature/map.module#MapModule',
    pathMatch: 'full'
   }]
 }];

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

core.module.ts:

import { NgModule, Optional, SkipSelf  } from '@angular/core';
import { LayoutModule } from './layout/layout.module';

@NgModule({
 imports: [
 // Layout Module (Sidenav, Toolbar)
 LayoutModule
 ],
 declarations: []
 })

 export class CoreModule {
 constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
 if (parentModule) {
  throw new Error(
    'CoreModule is already loaded. Imported in AppModule only.');
 }
 }
 }

layout.module.ts:

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

import { MaterialModule } from '@app/shared/material.module';
import { ToolbarModule } from '../toolbar/toolbar.module';
import { SidenavModule } from '../sidenav/sidenav.module';
import { LayoutComponent } from './layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    MaterialModule,
    SidenavModule,
    ToolbarModule
 ],
 declarations: [LayoutComponent]
 })
 export class LayoutModule { }

map-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map.component';

const routes: Routes = [
 {
   path: '',
   component: MapComponent
 }
];

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

map.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';

import { MaterialModule } from '@app/shared/material.module';
import { MapRoutingModule } from './map-routing.module';
import { MapComponent } from './map.component';

@NgModule({
  imports: [
    CommonModule,
    MapRoutingModule,
    MaterialModule,
    LeafletModule.forRoot()
  ],
  declarations: [MapComponent]
   })
   export class MapModule { }

component.html

 <router-outlet></router-outlet>

layer.component.html

<mat-drawer-container class="layout-container">

 <mat-drawer-content class="drawer-content">

<div class="wrapper" fxFlex="grow" fxLayout="row">

  <!-- SIDENAV -->
  <sidenav class="sidenav"></sidenav>
  <!-- END SIDENAV -->

  <div class="content-wrapper" fxFlex="grow" fxLayout="column">
    <!-- TOOLBAR -->
    <toolbar></toolbar>
    <!-- END TOOLBAR -->

    <!-- CONTENT -->
    <div class="main-container" fxFlex="grow">
      <router-outlet></router-outlet>
    </div>
    <!-- END CONTENT -->

  </div>

</div>