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 stackblitz.com/edit/santosh-angular-routing-concepts — Santosh Shinde
– Santosh Shinde, Commented Aug 31, 2020 at 3: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
– kalyan veenam, Commented Aug 31, 2020 at 4:22

Santosh Shinde · Accepted Answer · 2020-08-31 09:13:15Z

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

Sumit Vekariya · Accepted Answer · 2020-08-31 05:35:00Z

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, 2020 at 5:35

Sumit Vekariya

4882 silver badges12 bronze badges

6 Comments

kalyan veenam Over a year ago

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

Sumit Vekariya Over a year ago

In app-routing.module.ts you should make that change.

kalyan veenam Over a year ago

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.

Sumit Vekariya Over a year ago

That means either the path is not correct or there is typo. Can you please create stackblitz demo?

kalyan veenam Over a year ago

Thanks for your help. below is the link of stackblitz , stackblitz.com/edit/angular-ivy-6ce1kw?file=src/app/users/…

|

Andrei Gătej · Accepted Answer · 2020-08-31 09:35:43Z

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.

RICHARD ABRAHAM · Accepted Answer · 2020-08-31 09:53:49Z

0

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>

answered Aug 31, 2020 at 9:53

RICHARD ABRAHAM

2,58825 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

6 Comments

Comments

Working code in stackblitz

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Working code in stackblitz

Comments

Related