Angular 11 – маршрут с использованием именованных перенаправлений на '/'

Я обновляю приложение Angular с версии 10 до версии 11, которое использует routerLink, указывающий на выход с именем dialog, для создания модальных диалогов. Текущий компонент (CoreComponent в примере ниже) должен оставаться видимым при переходе к модальному диалоговому окну. По какой-то причине они перестали работать в версии 11, они всегда перенаправляются на «/». Никаких исключений не создается, и другие основные ссылки работают нормально.
Я создал образец StackBlitz из моей настройки маршрутизации с включенными файлами package.json версий v10 и v11.

Я перепробовал множество предложений из разных блогов и других вопросов, но ни одно из них не помогло мне с маршрутизацией. Версия Angular 11, похоже, реализовала довольно много исправлений, связанных с маршрутизацией и именованными выходами, но я не смог найти ничего конкретного для моего случая в журнале изменений.
Опция relativeLinkResolution: 'legacy' не помогает.

🤔 А знаете ли вы, что...
Angular Universal позволяет рендерить веб-приложение на сервере для улучшения SEO и производительности.


1
50
1

Ответ:

Решено

Я не думаю, что relativeLinkResolution связано с тем, как указано в этом вопросе: Angular RelativeLinkResolution — различия между устаревшим и исправленным.

Из того, что я прочитал в вашей демонстрации StackBlitz и сделал несколько проб и ошибок:

Проблема в вашем routes в core-routing.module.ts. Вы используете маршрут '' для перехода на страницу CoreComponent. Это приводит к тому, что маршрут всегда перенаправляется на «/».

Вы должны использовать pathMatch: 'full', чтобы маршрут с '' или '/' перенаправлялся только на страницу CoreComponent.

Это должно быть так:

const routes: Routes = [
  {
    component: CoreComponent,
    path: '',
    pathMatch: 'full'
  },
];

Кроме того, вам не нужно импортировать RouterModule в AppModule, поскольку это, похоже, дублирует цель в AppRoutingModule, которая будет импортировать RoutingModule.

@NgModule({
  imports: [
    BrowserModule,
    //RouterModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Обновлено: если вы хотите, чтобы CoreComponent отображался постоянно:

  1. Импортируйте CoreModule вместо redirectTo: '/' в app-routing.module.ts.
const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: () => import('./core/core.module').then((m) => m.CoreModule),
  },
  ...
];
  1. Удалите pathMatch: 'full' для приведенного ниже маршрута в файле core-routing.module.ts.
const routes: Routes = [
  {
    component: CoreComponent,
    path: '',
  },
];

Демо @ StackBlitz