angular 8 routes default empty not redirect to login module

Question

when i do {path: '', redirectTo: '/login', pathMatch: 'full'} and i go to localhost:4200 i get a blank page and i'm not going to the login.

I have my app routes.

appRoutes:

  export const appRoutes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard],
    data: { permittedRoles: ["Admin"] }
  },
  {
    path: 'content',
    loadChildren: () => import('./content/content.module').then(m => m.ContentModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    //loadChildren: './user/user.module#UserModule'
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),
    canActivate: [AuthGuard]

  },
  
  {
    path: '**', redirectTo: '/login'
  },
  {
    path: '', redirectTo: '/login', pathMatch: 'full'
  }
]

and i have my userRoutes

UserRoutes:

  export const userRoutes: Routes = [
  {
    path: '', component: UserComponent,
    children: [
      {
        path: '', component: SignInComponent
      },
      {
        path: 'signup', component: SignUpComponent
      },
      {
        path: 'resetPassword', component: ResetPasswordComponent
      },
      {
        path: 'passwordSent', component: PasswordLinkSentComponent
      },
      {
        path: 'forgotPassword', component: ForgotPasswordComponent
      },
      {
        path: 'personalDetails', component: PersonalDetailsComponent
      }
    ]
  }
]

Anybody knows what seems to be the problem ?

Thanks in advance everyone.

Wasim Wasim · Accepted Answer · 2020-06-24T07:53:02

You can use Component property instead of redirect

 const routes: Routes = [
      {
        path: "",
        component: LogInComponent,//Write name of component
        pathMatch: "full",     
      },
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
        data: { permittedRoles: ["Admin"] }
      },
      {
        path: 'content',
        loadChildren: () => import('./content/content.module').then(m => m.ContentModule)    
      },
      {
        path: 'login',
        //loadChildren: './user/user.module#UserModule'
        loadChildren: () => import('./user/user.module').then(m => m.UserModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)    
      },
       { path: "**", component: LogInComponent,pathMatch : "full"}
    ]

Make sure you have added these lines in your app-routing.module.ts

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

Edit : Use can Activate at module level .

angular 8 routes default empty not redirect to login module

1 Answers