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

Question

Я пытаюсь работать с роутером и ленивой загрузкой в ​​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, чтобы заставить плющ и ленивую загрузку работать. Другие маршруты и ленивые модули, которые я определил, работают.

Answer 1

Вы должны использовать относительные перенаправления как это:

приложение-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 {
}

дом-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 для рабочего примера.

Answer 2

Убедитесь, что у вас есть импорт AuthModule, а также HomeModule только в app-routing.module.ts(как ленивая загрузка). Убедитесь, что эти модули не импортированы внутрьapp.module.ts как обычно (без ленивой загрузки).