angular-top-level-routing-app-router

app-routing.module.ts

const routes: Routes = [
  {
    //Default redirection to login route.
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  //Separating the routes between login (non-secure) and secure section.
  {    
    path: 'secure',
    component: SecureContainerComponent,
    children: [
      { 
        //Default redirection to dashboard route in the secure section.
        path: '',
        redirectTo: '/secure/dashboard',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      //Lazy loading the feature modules.
      {
        path: 'module-a',
        loadChildren: () => import('./modules/feature-module-a/feature-module-a.module').then(m => m.FeatureModuleAModule)
      },
      {
        path: 'module-b',
        loadChildren: () => import('./modules/feature-module-b/feature-module-b.module').then(m => m.FeatureModuleBModule)
      },
      {
        //For any invalid routes in secure section, redirecting to dashboard route.
        path: '**',
        redirectTo: '/secure/dashboard'
      }
    ]
  },
  {
    //For any invalid routes not in secure section, redirecting to login route.
    path: '**',
    redirectTo: 'login'
  }
];