I'm attempting to implement tabs with lazy loading of feature modules. Here is the code I have so far:
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 goal was for selecting a tab to load a module like SystempreferencesModule and display the SystempreferencesComponent component, but that isn't happening. Am I misunderstanding something?
Appreciate any insights or guidance.