title: Angular 10 lazy Loading and routing doesn't function
body: <p>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 <a href="https://angular.io/guide/lazy-loading-ngmodules" rel="nofollow noreferrer">stock example</a> code on the Angular website, but I couldn't find the problem, even after multiple tries to solve the issue.</p>
  <p>My App.module:</p>
  <pre><code>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 {}
  </code></pre>
  <p>this is my app-routing module:</p>
  <pre><code>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: () =&gt;
        import('./User/user-profile/user-profile.module').then(
          (m) =&gt; m.UserProfileModule
        ),
    },
    { path: '**', redirectTo: '', pathMatch: 'full' },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
  })
  export class AppRoutingModule {}
  </code></pre>
  <p>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>
  <pre><code>&lt;p&gt;{{ title }}&lt;/p&gt;
  &lt;button [routerLink]=&quot;['events']&quot;&gt;Events&lt;/button&gt;
  &lt;button [routerLink]=&quot;['user/profile']&quot;&gt;User Profile&lt;/button&gt;
  </code></pre>
  <p>The module I am trying to lazy load, the user-profile module looks like this:</p>
  <pre><code>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 {}
  </code></pre>
  <p>And has a routing module of its own, like here:</p>
  <pre><code>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 {}
  </code></pre>
  <p>What Am I doing wrong/ missing, that the routing and lazy load do not simply work?</p>
  <p>The results of the buttons click is simply this:</p>
  <p>Default:
  <a href="https://i.stack.imgur.com/hp98g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hp98g.png" alt="default route" /></a></p>
  <p>Events Button:
  <a href="https://i.stack.imgur.com/EyhQJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EyhQJ.png" alt="when clicked on events button" /></a></p>
  <p>User-profile button:
  <a href="https://i.stack.imgur.com/9ZJED.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZJED.png" alt="when clicked on user/profile button (lazy load)" /></a></p>
  <p>The  full project code is here: <a href="https://bitbucket.org/Anirudh_Nandavar/lazyload_angular/src/master/" rel="nofollow noreferrer">https://bitbucket.org/Anirudh_Nandavar/lazyload_angular/src/master/</a></p>
  <p>Thank you in advance for your help!</p>