Cannot find module error in angular routing

Issue

My Angular project folder structure is

+-- app.module.ts
+-- app-routing.ts
+-- app.component.ts
+-- product/
|   +-- product.module.ts
|   +-- product-routing.ts
|   +-- product-detail/
|   |   +--product-detail.component.ts
|   |   +--product-detail.component.html

In my app-routing.ts

{path:'products',loadChildren:'app/product/product.module#ProductModule'}

In my product-routing.ts

{ path: 'detail', component: ProductDetailComponent }

When I load the url – page/product/detail , I get the following error

ERROR Error: Uncaught (in promise): Error: Cannot find module “app/product/product.module”.
Error: Cannot find module “app/product/product.module”.

Steps tried
tried changing ‘app/product/product.module#ProductModule’ to
‘./product/product.module#ProductModule’. not solved.

Where I have went wrong? Any help is appreciated.

Solution

You can try loadChildren for lazy module loading

I have create a demo on Stackblitz

{path:'products',loadChildren: './product/product.module#ProductsModule''}

Answered By – Krishna Rathore

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.