在 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

在我的应用程序中-routing.ts

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

在我的产品中-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'。没解决。

我哪里做错了？感谢任何帮助。

Answer 1

这可以通过删除您的拼写错误来解决。您声明了产品模块，并在路由中调用了产品模块（不是）。更改为：

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

Answer 2

你可以尝试loadChildren延迟模块加载

我已经在 Stackblitz

上创建了一个演示

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

Answer 3

试试this approach，我用了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)
  }
];