Ленивая загрузка приводит к ОШИБКЕ Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL:

Question

Я реализую ленивую загрузку и приведу к этой ошибке. Я видел много постов, и ни один из них не дает решения.

Как воспроизвести:

1. Go до https://stackblitz.com/edit/angular-sxmpj8
2. Нажмите на вкладку заказов
3. Нажмите Тест

Ожидается: открывается тестовый компонент. Факт: в результате получается "Uncaught (в обещании): ошибка: невозможно сопоставить ни один маршрут. Сегмент URL:" error

Я пытаюсь лениво загрузить модуль заказов, который имеет два компонента заказов и проверить. Маршрут заказов работает нормально, но маршрут тестового компонента выдает ошибку.

Приложение находится по адресу https://stackblitz.com/edit/angular-sxmpj8

В orders-routing.module.ts маршруты определены следующим образом:

    const routes: Routes = [
  {
    path: '',
    component: OrdersComponent,

    children: [
      { path: 'test', component: TestComponent
  }]
  }
];

маршруты в app-routing.module.ts определены ниже.

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

   // Tried this also
   // loadChildren:  './orders/orders.module#OrdersModule'
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

В файле orders.component.ts есть запись

<button routerLink="/test">Test</button>

Нажав на этот результат по ошибке

ОШИБКА: Uncaught (в обещании ): Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: ошибка 'test': невозможно сопоставить ни один маршрут. Сегмент URL: «тест»

Answer 1

Есть две проблемы:

1. Поскольку ваш тестовый компонент настроен как дочерний маршрут, вам необходим модуль <router-outlet> на уровне модуля, чтобы маршрутизатор Angular знал, где визуализировать ваш тест component.
2. На вашей кнопке "test" вам нужно указать весь маршрут (включая /orders).

Я разветвил ваш стек, поэтому вы можете видеть, что он работает здесь = > https://stackblitz.com/edit/angular-sxmpj8-q9xzzv

Answer 2

Вам нужно добавить routerLink="/orders/test" вместо routerLink="/test". Также вам нужно добавить <router-outlet></router-outlet> в компонент orders.com. html, чтобы показать представление testComponent.

Изменение в orders.component.html

     <p>
      orders works!
    </p>

    <button routerLink="/orders/test">Test</button>
    <router-outlet></router-outlet>

Надеюсь, это поможет !!

Answer 3

Сначала routerLink должен быть относительным путем, в противном случае он будет go к root приложения, и на маршрутах приложения не определен путь /test. Относительный путь в routerLink относительно текущего router-outlet, в котором определен routerLink.

Во-вторых, orders.component.html также требуется <router-outlet></router-outlet>, в противном случае тестовый компонент не будет размещен где угодно.

Примерно так:

<button routerLink="test">Test</button>
<router-outlet></router-outlet>

рабочий пример

Answer 4

попробуйте это:

<button routerLink="/orders">Test</button>

и после изменения в модуле маршрутизации заказов:

const routes: Routes = [
  {
    path: '',
    component: OrdersComponent
  }
]
  }
];