angular 18 lazy loaded routes not rendering to router-outlet

I have an app.module file that declares my routes with lazy loading that renders the content in between my nav and footer via the router-outlet. It renders fine with the non-lazy loaded component method, but switching to modules results in a blank page besides my nav and footer. No errors in the console, just a lack of content.

The following is my app.module file.

import { NgModule } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatExpansionModule } from '@angular/material/expansion';
import { MatToolbarModule } from "@angular/material/toolbar";
import { RouterOutlet, Routes } from "@angular/router";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from '@angular/router';
import "@angular/compiler";

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDividerModule } from "@angular/material/divider";
import { MatMenuModule } from "@angular/material/menu";

/* ... A bunch of component imports */

const routes: Routes = [
{ path: '', loadChildren: ()=>import('../LandingViewComponent/LandingViewComponent').then(m => m.LandingViewModule) },
{ path: 'about-us', loadChildren: ()=>import('../AboutUsViewComponent/AboutUsViewComponent').then(m => m.AboutUsViewModule) },
{ path: 'careers', loadChildren: ()=>import('../CareersViewComponent/CareersViewComponent').then(m => m.CareersViewModule) },
{ path: 'contact', loadChildren: ()=>import('../ContactViewComponent/ContactViewComponent').then(m => m.ContactViewModule) },
{ path: '**', loadChildren: ()=>import('../NotFoundViewComponent/NotFoundViewComponent').then(m => m.NotFoundViewModule) },
];

@NgModule({
declarations: [
AppComponent,
],
imports: [
RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' }),
BrowserAnimationsModule,
BrowserModule,
RouterModule,
RouterOutlet,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatDividerModule,
MatMenuModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatExpansionModule,
FooterModule,
NavComponentModule,
],
exports: [
AppComponent
],
providers: [
SwipeableDirective
],
bootstrap: [
AppComponent,
LandingCarouselComponent,
LandingCtasComponent,
SpecializeSectionComponent,
WarrantySectionComponent,
HiringSectionComponent,
LandingMaterialsComponent,
FooterComponent,
AboutUsViewComponent,
AboutUsHeaderComponent,
AboutUsQualityComponent,
/* ... A bunch of components */
]
})
export class AppModule { }


The following is the app.html file

<g-nav></g-nav>
<router-outlet></router-outlet>
<g-footer></g-footer>


The following is an example of what my components and their module looks like

import { Component, ElementRef, HostBinding, Input, NgModule, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { GPWebHostService, HiringSectionModule, LandingCarouselModule, LandingCtasModule, LandingMaterialsModule, PartnersSectionModule, ScreenSizeService, SocialProofModule, SpecializeSectionModule, WarrantySectionModule } from '@gp-lib';
import { fadeInDownOnEnterAnimation, fadeOutUpAnimation, slideOutUpAnimation } from 'angular-animations';

@Component({
selector: 'g-landingview',
templateUrl: './LandingViewComponent.html',
styleUrl: './LandingViewComponent.scss',
animations: [
fadeInDownOnEnterAnimation({anchor: 'fadeInOnEnter'}),
slideOutUpAnimation({anchor: 'fadeOutUp'})
],
})
export class LandingViewComponent {

showCarouselCta = false;

slides = []; // The default slides

constructor(
public scr: ScreenSizeService,
private elementRef: ElementRef
) {}
}

@NgModule({
declarations: [LandingViewComponent],
imports: [
LandingCarouselModule,
LandingCtasModule,
SpecializeSectionModule,
WarrantySectionModule,
LandingMaterialsModule,
HiringSectionModule,
PartnersSectionModule,
SocialProofModule,
],
exports: [LandingViewComponent],
})
export class LandingViewModule {}


I have tried moving around modules, only using a single route, using forChild instead of forRoot, and I have tried doing routing in a different parent module with no success. I am considering just implementing lazy loading for components using the ViewContainerRef.createComponent method, but I would prefer doing it via the angular router since that seems to be the easiest approach.

Continue reading...