Angular 8 - How to load lazy modules into tabs

I am trying have tabs that would lazy load feature modules. Here is my code:

Main router:

export const AppRoutes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
    {
      path: 'home', canActivate: [AuthGuard],
      loadChildren: './views/home/home.module#HomeModule'
    },
    {
      path: 'settings',
      loadChildren: './views/settings/settings.module#SettingsModule'
    },
  ]}
];

settings.module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { SettingsComponent } from './settings.component';
import { SettingsRoutingModule } from './settings-routing.module';

@NgModule({
  imports: [
    SettingsRoutingModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  declarations: [ SettingsComponent ]
})

export class SettingsModule { }

settings-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SettingsComponent } from './settings.component';

const routes: Routes = [
  {
    path: '',
    component: SettingsComponent,
    data: {
      title: 'Settings'
    },
    children: [
      { path: 'syspref', loadChildren: './systempreferences/systempreferences.module#SystempreferencesModule' },
      { path: 'userpref', loadChildren: './userpreferences/userpreferences.module#UserpreferencesModule' },
    ]
  }
];

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

settings.component.html

<section id="tabs">
	<div class="container">
		<div class="row">
			<div class="col-xs-12" style="width: 100vw;">
				<nav>
					<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
            <a class="nav-item nav-link" id="nav-syspref-tab" data-toggle="tab" href="#" role="tab" aria-controls="nav-syspref"
              aria-selected="false" routerLink="syspref">Default Preferences</a>
            <a class="nav-item nav-link" id="nav-userpref-tab" data-toggle="tab" href="#" role="tab" aria-controls="nav-userpref"
              aria-selected="false" routerLink="userpref">User Preferences</a>
					</div>
        </nav>
				<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
					<div class="tab-pane fade show active" id="nav-syspref" role="tabpanel" aria-labelledby="nav-syspref-tab">
					</div>
					<div class="tab-pane fade" id="nav-userpref" role="tabpanel" aria-labelledby="nav-userpref-tab">
					</div>
				</div>

			</div>
		</div>
	</div>
</section>
<router-outlet></router-outlet>

systempreferences.module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SystempreferencesComponent } from './systempreferences.component';

@NgModule({
  imports: [
    CommonModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  declarations: [SystempreferencesComponent]
})
export class SystempreferencesModule { }

My expectation was when I select a tab I will get a module such as SystempreferencesModule loaded and the SystempreferencesComponent component would show up, but that's not happening. Am I getting it all wrong?

Thanks

I think you are using the old way of setting up lazy loaded routes. This was changed in Angular 7 or 8 (I think...). New way should be like this

{
	path: 'syspref',
	loadChildren: () => import('./systempreferences/systempreferences.module').then(m => 
    m.SystempreferencesModule)
},

Also in your SystemPreferences module you need a route like this:

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

You can just add the routes variable at the top of your System Preferences module and add the below to your imports array (just slightly easier than setting up a routing module... functionally the same):

RouterModule.forChild(routes)