Cannot find module error in angular routing

Question

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.

'product' or 'products'? Subfolder includes 's' at the end and all configs/routings as well? — MarkusEgle
– MarkusEgle, Commented Jul 4, 2018 at 10:34
Possible duplicate of Angular2 lazy loading module error 'cannot find module' — Lia
– Lia, Commented Jul 4, 2018 at 10:34

Krishna Rathore · Accepted Answer · 2018-08-28 14:46:02Z

1

You can try loadChildren for lazy module loading

I have create a demo on Stackblitz

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

edited Aug 28, 2018 at 14:46

answered Jul 4, 2018 at 10:33

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arash Over a year ago

Excellent solution :)

S.Pradeep Over a year ago

Yes it worked, it would be great if you explain why loadChildren: () =>ProductsModule works but not loadChildren:'app/products/products.module#ProductModule'

Tasnim Reza Over a year ago

It is working because it is not lazy loaded anymore!

Krishna Rathore Over a year ago

you can do something like this as well : loadChildren:'./java/java.module#JavaModule'

Isurendrasingh · Accepted Answer · 2018-07-04 10:32:49Z

1

That can be solved by removing your typo mistake. You declared Product Module & in routing you are calling Products Module (which is not). Change to:

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

answered Jul 4, 2018 at 10:32

Isurendrasingh

4427 silver badges22 bronze badges

Comments

johannesMatevosyan · Accepted Answer · 2020-03-17 09:38:09Z

1

Try this approach, I used it for Angular 9

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

answered Mar 17, 2020 at 9:38

johannesMatevosyan

2,3082 gold badges39 silver badges44 bronze badges

Collectives™ on Stack Overflow

Cannot find module error in angular routing

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related