Angular - Why Lazy Load return an empty path?

Question

I am having an issues with the Lazy Loading. I can navigate between the pages, to paths are correct, but the lazy loaded pages are empty: http://localhost:4200/contact and http://localhost:4200/tours

The project is super simple, I basically just started.

If you have time have a look at the repository [Github]

--- APP.ROUTES.TS ----

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

export enum AppRoutes {
  HOME = 'home',
  TOURS = 'tours',
  CONTACT = 'contact'
}

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: AppRoutes.HOME},

 {
    path: AppRoutes.TOURS,
    loadChildren: () =>
      import('./pages/tours/tours.module').then((m) => m.ToursModule),
  },
  {
    path: AppRoutes.CONTACT,
    loadChildren: () =>
      import('./pages/contact/contact.module').then((m) => m.ContactModule),
  },
  {
    path: '**',
    redirectTo: AppRoutes.HOME,
  },
];

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

--- NAVBAR.COMPONENT.HTML ---

 <a [routerLink]="'/tours'" routerLinkActive="active">Tours</a>
<a [routerLink]="'/contact'" routerLinkActive="active">Contact</a>

Best P.

Answer 1

It seems in both ToursModule and ContactModule you have not imported respective Routing modules. You have to import the respective routing modules in the lazy-loaded modules as well

@NgModule({
  declarations: [
    ToursComponent,
    ToursSingleComponent,
    TourDetailsComponent,
  ],
  imports: [
    CommonModule,
    ToursRoutesModule 
  ]
})
export class ToursModule { }