Angular Lazy Loading

Question

been having a little trouble recently with lazy loading. Now I'm not sure if this is supposed to be happening or not (and I've tried searching for the issue but I'm not even sure how to word it if I'm being honest).

So I do everything for setup of the lazy loaded module like you would usually do. Everything from making sure that the app routing module is setup correctly as 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 { }

Then, making sure that everything is correctly setup 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 { }

Now I have yet to do a redirect path for path: '', in the app router module, but for some reason at localhost:4200/ , it loads the home module. In Augury this is what I'm seeing currently:

Augury Routing Tree

Edit* snipped code of 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* What it looks like when I go to home route:

Edit* changed the homepage.module.ts router into it's own file to 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've done everything correctly from what I understand, and I've done this tons of times to know that there's something wrong here. Anyone have any ideas on what I'm missing? Thanks!

Solved**** : Turns out I was using app-routing.module and I should be using a routing module for Shared.module instead. So basically, get rid or app-routing.module and do everything that I did in there within the shared-routing.module and that will resolve the issue. Thanks, everyone for the help!

Answer 1

The way of lazy loading changed in the newer versions, refactor the config of routes to:

const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: () => import('./shared/modules/homepage/homepage.module').then(m => m.HomepageModule)
  },
];

And export the RouterModule in your HomeModule:

@NgModule({
  declarations: [
    HomeMainComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes),
  ],
  exports: [
    HomeMainComponent,
    RouterModule 
  ]
})
export class HomepageModule { }