I have been experimenting with the router and lazy loading in Angular 8, having previously used it successfully in Angular 7.
I have set up some basic routes as shown below:
/home
/auth
/auth/login
/auth/signUp
My goal is to redirect /auth to /auth/login and everything else to /home.
To achieve this, my app-routing.module.ts file looks like this:
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'
}
];
My auth-routing.module.ts file looks like this:
const routes: Routes = [
{
path: '',
redirectTo: '/auth/login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'signUp',
component: LogoutComponent
}
];
The issue I am facing is that it always redirects to the auth page and disregards the other redirects. The paths /login and /signUp are also accessible at a root level, which seems strange, but they still work when prefixed with /auth/login, which adds to the confusion.
It appears that the routes are somehow duplicated.
Furthermore, when I prefix the paths in auth-routing.module.ts with auth/, it becomes possible to navigate to /auth/auth/login.
I have enabled all necessary features of Angular 8 for Ivy and lazy loading to function properly. The remaining routes and lazy-loaded modules I defined are functioning correctly.