Блог

В чем может быть причина того, что я не вижу никаких путей в браузере, а только localhost:4200 . Но я могу нормально перемещаться по приложению. Мой routing.ts выглядит так.

Я использую Angular 12

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { VacComponent } from './modules/vac/vac.component';
import { VibComponent } from './modules/vib/vib.component';
import { CatComponent } from './modules/cat/cat.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', redirectTo: 'login'},
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    // canActivate: [AuthGuard]
  },
  {
    path: 'vac',
    component: VacComponent,
    loadChildren: () => import('./modules/vac/vac.module').then(m => m.VacModule),
    // canActivate: [AuthGuard]
  },
  {
    path: 'vib',
    component: VibComponent,
    loadChildren: () => import('./modules/vib/vib.module').then(m => m.VibModule),
    // canActivate: [AuthGuard]
  },
  {
    path: 'cat',
    component: CatComponent,
    loadChildren: () => import('./modules/cat/cat.module').then(m => m.CatModule),
    // canActivate: [AuthGuard]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

Я попытался воспроизвести вашу ошибку в Стекблитце, но безуспешно. Вот ссылка. Что мне показалось странным в вашем примере, так это то, что вы не указали соответствие пути к вашему первому перенаправлению. Я думаю, что в этом может быть проблема.

По умолчанию компилятор Angular сопоставляет маршруты по префиксу. Поэтому маршрут { path: '', redirectTo: 'login'} будет соответствовать всем последующим маршрутам в routes массиве.

Кроме того , поскольку стратегия сопоставления маршрутов по умолчанию установлена на prefix , что в основном указывает на то, что Угловой Router будет прокладывать маршрут на основе пути, совпадающего с префиксом URL, по которому вы переходите. И поскольку каждый путь начинается с «все перенаправления», пользователь переходит к /login компоненту.

Поэтому, чтобы решить эту проблему, вам необходимо явно изменить стратегию сопоставления маршрутов на full .

 const routes: Routes = [{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  ...,
  ...,

];
 

Как pathMatch: full указывает на то, что для маршрутизации углового маршрутизатора пользователю необходимо сопоставить весь путь URL-адреса, чтобы перенаправить пользователя по указанному пути.

Или,

Переместите определение маршрута в pathMatch: prefix нижнюю часть routes массива, как показано в следующем фрагменте.

 const routes: Routes = [
  ...,
  ...,
  ...,

  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'prefix'
  }

]