Angular 10 lazy Loading and routing doesn't function

Question

I was trying routing and lazy loading in Angular 10.1.6, and for some reason I am not able to discover, the routing and lazy loading of a module simply doesn't seem to work. I have tried to compare it with the stock example code on the Angular website, but I couldn't find the problem, even after multiple tries to solve the issue.

My App.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EventsComponent } from './events/events.component';

@NgModule({
  declarations: [AppComponent, EventsComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

this is my app-routing module:

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

const routes: Routes = [
  { path: 'events', component: EventsComponent },
  {
    path: 'user',
    loadChildren: () =>
      import('./User/user-profile/user-profile.module').then(
        (m) => m.UserProfileModule
      ),
  },
  { path: '**', redirectTo: '', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

The app.component template simply has 2 buttons to set the router link to the URLs as needed. The app.component.html looks like this:

<p>{{ title }}</p>
<button [routerLink]="['events']">Events</button>
<button [routerLink]="['user/profile']">User Profile</button>

The module I am trying to lazy load, the user-profile module looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserProfileRoutingModule } from './user-profile-routing.module';
import { UserProfileComponent } from './user-profile.component';

@NgModule({
  declarations: [UserProfileComponent],
  imports: [CommonModule, UserProfileRoutingModule],
})
export class UserProfileModule {}

And has a routing module of its own, like here:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { UserProfileComponent } from './user-profile.component';

const routes: Routes = [{ path: 'profile', component: UserProfileComponent }];

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

What Am I doing wrong/ missing, that the routing and lazy load do not simply work?

The results of the buttons click is simply this:

Default:

Events Button:

User-profile button:

The full project code is here: https://bitbucket.org/Anirudh_Nandavar/lazyload_angular/src/master/

Thank you in advance for your help!

Answer 1

You forgot to put <router-outlet> tag in your app.component.html:

<p>{{ title }}</p>
<button [routerLink]="['events']">Events</button>
<button [routerLink]="['user/profile']">User Profile</button>
<router-outlet></router-outlet>  <================================= this one