Despite my best efforts, I am struggling to implement lazy loaded modules in my project. It seems like I am missing a key element that is preventing me from loading modules on demand.
This is how my project structure looks:
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 {}
Even after adding the correct relative path to my loadChildren tag, I continue to encounter an error stating "cannot load module". Despite searching on multiple websites for solutions, it feels like I am overlooking a fundamental aspect here.
I would greatly appreciate any assistance or guidance on this issue.