Angular 16: failed to load component through lazy loading process

Question

I'm trying to lazy load a component (HomeComponent) in my project. I have tried to load it by using a button (upon clicking the button the URL will be changed) and manually changing the URL. But the output seems stuck in the app.component.html and does not load the target component.

Here is the code from the app.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'home',
        loadChildren: () => import('./main/home/home.module').then(m => m.HomeModule)
      }
    ]
    
  }
]

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    HttpClientModule,
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, here is the home.module.ts file. It is the component which I am trying to access.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

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

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

What seems to be there problem here? The console does not show any error like it cannot find the module or something. What can I do now from here?

Answer 1

I wrote the same code in my IDE, its working. I think you might have forgotten to add <router-outlet></router-outlet> in the app.component.html file.

Its a placeholder to load the components dynamically.