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.

Why not use the command `ng g module tours --module app --route tours`? That gives you everything you need rightaway — Pieterjan, Jul 01 '23 at 06:43
I didn't know. I will use the next time. Thanks for sharing it — PLee, Jul 01 '23 at 07:29
[Here's](https://github.com/MintPlayer/mintplayer-ng-bootstrap/tree/master/apps%2Fng-bootstrap-demo%2Fsrc%2Fapp) one example. [Here's](https://github.com/MintPlayer/MintPlayer/tree/master/MintPlayer.Web/ClientApp/src/app) another — Pieterjan, Jul 01 '23 at 07:34
Btw... when I use the command ng g module tours --module app --route tours --- it give me an error Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/. Error: Unknown argument: faq — PLee, Jul 01 '23 at 09:03

Kaneki21 · Accepted Answer · 2023-07-01T06:34:27.087

2

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 { }

edited Jul 01 '23 at 06:34

answered Jul 01 '23 at 06:26

Kaneki21

1,323
2
4
22

@PLee Yeah, you have no `RouterModule.forChild` in your `imports` – Pieterjan Jul 01 '23 at 06:41
I added import { AppRoutingModule } from 'src/app/app.routes'; in contact and tours module. I didn't get "You have to import the respective routing modules in the lazy-loaded modules as well" I updated the repository - Have a look if you have time please. – PLee Jul 01 '23 at 07:22
It works. I imported import { ContactRoutesModule } from './contact.routes'; and { ToursRoutesModule } from './tours.routes'; Thanks for the support! – PLee Jul 01 '23 at 07:30

Angular - Why Lazy Load return an empty path?

1 Answers1