I've been facing a bit of difficulty lately with lazy loading. I'm not sure if this is expected or not, and I've struggled to articulate the issue when searching for solutions.
So, I followed all the steps for setting up the lazy loaded module as usual. This includes ensuring that the app routing module is configured correctly like so:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: './shared/modules/homepage/homepage.module#HomepageModule'
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Next, verifying everything is set up properly with the lazy loaded module, in this case, the homepage module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
//~~~~ Important:
import { HomeMainComponent } from './components/home-main/home-main.component';
const homeRoutes: Routes = [
{
path: '',
component: HomeMainComponent,
}
]
@NgModule({
declarations: [
HomeMainComponent
],
imports: [
CommonModule,
RouterModule.forChild(homeRoutes),
],
exports: [
HomeMainComponent
]
})
export class HomepageModule { }Currently, even without creating a redirect path for path: '', in the app router module, localhost:4200/ still loads the home module. In Augury, this is what I see:
Edit* Excerpt from app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//~~~~ Important:
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { FeaturesModule } from './features/features.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CoreModule,
SharedModule,
FeaturesModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Edit* Visual representation of the home route: https://i.sstatic.net/HMcFm.png
Edit* Refactored homepage.module.ts into its own file named homepage-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeMainComponent } from './components/home-main/home-main.component';
const homeRoutes: Routes = [
{
path: '',
component: HomeMainComponent,
},
];
@NgModule({
declarations: [
HomeMainComponent,
],
imports: [RouterModule.forChild(homeRoutes)],
exports: [
HomeMainComponent,
RouterModule]
})
export class HomepageRoutingModule { }I have followed the correct steps, and after multiple attempts, I sense there might be an oversight on my end. Any insights on what could possibly be missing? Appreciate any assistance!
Solved**** : I realized I was using app-routing.module instead of a routing module for Shared.module. Eliminating app-routing.module and transferring those configurations to shared-routing.module resolved the issue. Much gratitude to everyone who pitched in their advice!