Facing issue while Lazy loading a module ( Cannot find module)

Question

I am working on creating lazy loaded modules In spite of all my efforts, I think I am missing something here due to which I'm unable to load modules on demand.

I have my project structure as below:

screenshot of project structure

app
 -users
  -homeComponent
  -signupComponent 
  -users.routing.module.ts
  -users.module.ts
 -list
  -createListComponent
  -dashboardComponent 
  -list.routing.module.ts
  -list.module.ts

users-routing.module.ts

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

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "/signup",
    component: SignupComponent
  }

];

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

app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: './app/users/users.module#UsersModule',
  },
];

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

I have added relative path in my loadChildren tag, but I am still getting an error saying "cannot load module". I have tried different websites but I feel I am missing a basic part here.

screenshot of error

Any help would be appreciated.

Here is working demo of lazyload module https://stackblitz.com/edit/santosh-angular-routing-concepts — Santosh Shinde, Aug 31 '20 at 03:56
@SantoshShinde Thank you for the working Demo, As per the project, i have modified my link to routing module. Still getting the same issue : { path: 'signup', loadChildren: 'app/users/users.module#UsersModule', }, I somehow landing in to same issue again — kalyan veenam, Aug 31 '20 at 04:22

score 1 · Answer 1 · answered Aug 31 '20 at 05:35

1

Lazy Loading Syntax now uses promise / observable, Try this:

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
  },
];

answered Aug 31 '20 at 05:35

Sumit Vekariya

482
2
12

Should i change the syntax in my app.routing.module.ts file or users.routing.mmodule.ts file? When i changed the syntax in app.routing.module.ts file, it is throwing an error. Please clarify the changes – kalyan veenam Aug 31 '20 at 06:00
In app-routing.module.ts you should make that change. – Sumit Vekariya Aug 31 '20 at 06:05
I am getting below error with your change. src/app/users/users.module.ts:15:32 - error TS2307: Cannot find module './app/users/users.module' or its corresponding type declarations. – kalyan veenam Aug 31 '20 at 06:06
That means either the path is not correct or there is typo. Can you please create stackblitz demo? – Sumit Vekariya Aug 31 '20 at 06:07
Thanks for your help. below is the link of stackblitz , https://stackblitz.com/edit/angular-ivy-6ce1kw?file=src/app/users/users.module.ts – kalyan veenam Aug 31 '20 at 06:52
I am not getting any error now , but not navigating to signup page – kalyan veenam Aug 31 '20 at 07:02

score 1 · Accepted Answer · answered Aug 31 '20 at 09:13

Add users component in the users module.
Add users component will be the container where other child component get loaded.
Add <router-outlet></router-outlet> in the app componentcompoent

users-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    component: UsersComponent, // will be bootstrap component for users module
    children: [ // will children for user module
      {
        path: 'signup',
        component: SignupComponent,
      },
      {
        path: 'home',
        component: HomeComponent,
      },
    ]
  }
];

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

Here is working demo https://stackblitz.com/edit/angular-ivy-j6wtlk

score 0 · Answer 3 · answered Aug 31 '20 at 09:35

I think there is a problem with your route configuration.

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "/signup",
    component: SignupComponent
  }

];

With a configuration like this, the SignupComponent route object will never be reached, because Angular router will go through the configuration arrays until it finds the first match(in a DFS manner) and since every possible route matches "", it will search from there.

What I think you can do is to add the pathMatch: 'full' option:

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    pathMatch: 'full',

  },
  {
    path: "/signup",
    component: SignupComponent
  }

];

What you could also do is to add the HomeComponent route add the end of the array as it is.

score 0 · Answer 4 · answered Aug 31 '20 at 09:53

Working code in stackblitz

just make the changes as below, as lazy loaded module does not require path value again and thus can be left blank

// users-routing.module.ts
const routes: Routes = [
  {
    path: '', // leave blank
    component: SignupComponent,
  },
];

<!-- app.component.html -->
<p> home works</p>
<router-outlet></router-outlet>

Facing issue while Lazy loading a module ( Cannot find module)

4 Answers4

Working code in stackblitz