Не удается найти ошибку модуля в угловой маршрутизации

Question

Структура моего углового проекта

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

В моем продукте-routing.ts

{ path: 'detail', component: ProductDetailComponent }

Когда я загружаю URL - страницу / продукт / деталь, я получаю следующую ошибку

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается найти модуль "app/product/product.module". Ошибка: не удается найти модуль "app/product/product.module".

Шаги пытались
попытался изменить 'app/product/product.module#ProductModule' на './product/product.module#ProductModule'. не решено.

Где я ошибся? Любая помощь приветствуется.

Answer 1

Ты можешь попробовать loadChildren для отложенной загрузки модуля

У меня есть демо на Stackblitz

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

Answer 2

Попробуйте этот подход, я использовал его для 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)
  }
];

Answer 3

Это можно решить, удалив опечатку. Вы объявили Product Module и в маршрутизации вы называете Product Module (а это не так). Изменить на:

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