Angular 路由中的找不到模块错误

Question

我的Angular项目文件夹结构如下：

+-- 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

在我的app-routing.ts文件中：

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

在我的product-routing.ts文件中。

{ path: 'detail', component: ProductDetailComponent }

当我加载url - page/product/detail时，我遇到了以下错误

ERROR Error: Uncaught (in promise): Error: Cannot find module "app/product/product.module". Error: Cannot find module "app/product/product.module". 尝试的步骤 尝试将'app/product/product.module＃ProductModule'更改为'./product/product.module＃ProductModule'，但未解决。

我错在哪里？任何帮助都将不胜感激。

- S.Pradeep

---

重新启动 ng serve - Sachila Ranawaka

“product” 还是 “products”？子文件夹包括结尾的 “s” 以及所有配置/路由吗？ - MarkusEgle

可能是Angular2懒加载模块错误“无法找到模块”的重复问题。 - Fateme Fazli

Answer 1

尝试使用这种方法，我在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)
  }
];

- johannesMatevosyan

Answer 2

你可以通过更正拼写错误来解决这个问题。你在声明模块时使用了 "Product Module &"，但在路由中却调用了 "Products Module"（二者不同）。请改为：

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

- Isurendrasingh

Answer 3

您可以尝试使用loadChildren进行惰性模块加载。

我在Stackblitz上创建了一个演示。

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

- Krishna Rathore

---

优秀的解决方案 :) - Arash

是的，它起作用了。如果您能解释为什么 loadChildren: () => ProductsModule 可以工作，但是 loadChildren: 'app/products/products.module#ProductModule' 不能工作，那就太好了。 - S.Pradeep

它能够工作是因为它不再是惰性加载！ - Tasnim Reza

你也可以像这样做： loadChildren: './java/java.module#JavaModule' - Krishna Rathore