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

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:
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.
Any help would be appreciated.

Answer 1

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

Answer 2

Lazy Loading Syntax now uses promise / observable, Try this:
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
},
];

Answer 3

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.

Answer 4

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>