Routing & Layouts

Each portal (Support Portal, Management Portal) is an independent Angular 19 application with its own Angular Router configuration and layout shell, sharing the layout components from ft-common.

Router setup

Both app-routing.module.ts files declare the same top-level shape:

const routes: Routes = [
  { path: 'login', loadChildren: () => AuthenticationModule, data: { preload: true, delay: false, name: 'login' } },
  { path: '',      loadChildren: () => DashboardModule,      data: { preload: true, delay: false, name: '' } },
  { path: 'not-found', component: PageNotFoundComponent },
  { path: '**', redirectTo: 'not-found' },
];

RouterModule.forRoot(routes, { preloadingStrategy: AppPreloadingStrategy, useHash: false })

  • AuthenticationModule covers login, password reset and the change-password flow.

  • DashboardModule is the application shell; the feature modules listed in Support Portal Modules and Management Portal Modules hang off it.

  • AppPreloadingStrategy (@ft/common/services) preloads the modules whose route data sets preload: true, honouring an optional delay.

  • useHash: false — path-based URLs, which is why Nginx serves an SPA fallback to index.html.

  • @ngrx/router-store connects the router state to the NgRx store (see State & Data Flow).

Guards

Route access is enforced by the guards in @ft/common/guards:

  • AuthenticationGuard — reads the token from the store, redirects to /login when it is missing, away from /login when it is present, and to /login/change-password while the backend requires a password change.

  • PermissionsGuard and TabsPermissionsGuard — check the user group’s portal permissions before a route or a tab inside a page is opened.

  • MenuItemsPermissionsGuard — filters the navigation menu to the permitted entries.

Layout

Both portals build the same shell from ft-common components: menu and side-bar for navigation, action-bar for page-level actions, and the routed content area. Unknown paths land on PageNotFoundComponent through the not-found route.

Base path

Both applications use <base href="/"> in source. The deployed base paths are applied at build time with --base-href /support-portal/ and --base-href /management-portal/, matching the locations Nginx serves them under — see Building the Image.

Related pages