Angular 8 ленивых маршрутов разрешается с префиксом и без него и перенаправляет перед родителем - PullRequest
Новая
       30

Angular 8 ленивых маршрутов разрешается с префиксом и без него и перенаправляет перед родителем

1 голос
/ 17 июня 2019

Я пытаюсь работать с маршрутизатором и ленивой загрузкой в ​​angular 8. Ранее я успешно использовал его в Angular 7.
У меня есть несколько основных маршрутов, которые следующие: 

/home
/auth
/auth/login
/auth/signUp

Я бы хотел /auth перенаправить на /auth/login, а все остальное перенаправить на /home.
Для этого мой app-routing.module.ts выглядит так: 

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

И мой auth-routing.module.ts выглядит так: 

const routes: Routes = [
  {
    path: '',
    redirectTo: '/auth/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signUp',
    component: LogoutComponent
  }
];

Проблема в том, что он всегда перенаправляет на страницу авторизации и игнорирует другие перенаправления.Пути /login и /signUp также доступны на корневом уровне, что является странным, но они также работают, если иметь префикс /auth/login, что еще более необычно.

Так что по какой-то причине кажется, что маршруты существуют дважды.
Также, когда я добавляю пути в auth-routing.module.ts с помощью auth/, внезапно становится возможным указать /auth/auth/login

Я активировал все необходимые функции Angular 8, чтобы заставить плющ и ленивую загрузку работать.Другие маршруты и ленивые модули, которые я определил, работают.

1 Ответ

1 голос
/ 18 июня 2019

Вам необходимо использовать относительные перенаправления следующим образом:

app-routing.module.ts 

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
const routes: Route[] = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

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

auth-routing.module.ts

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import { LoginComponent } from './login.component';

import { LogoutComponent } from './logout.component';
const routes: Route[] = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signUp',
    component: LogoutComponent
  }
];

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

home-routing.module.ts 

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Route[] = [
  {
    path: '',
    component: HomeComponent
  }
];

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

См. https://stackblitz.com/edit/angular-gmsgn2 для рабочего примера.

...