flare-ui/src/app/app.routes.ts

import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';
import { RealtimeChatComponent } from './components/chat/realtime-chat.component';

export const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('./components/login/login.component').then(m => m.LoginComponent)
  },
  {
    path: '',
    loadComponent: () => import('./components/main/main.component').then(m => m.MainComponent),
    canActivate: [authGuard],
    children: [
      {
        path: 'user-info',
        loadComponent: () => import('./components/user-info/user-info.component').then(m => m.UserInfoComponent)
      },
      {
        path: 'environment',
        loadComponent: () => import('./components/environment/environment.component').then(m => m.EnvironmentComponent)
      },
      {
        path: 'apis',
        loadComponent: () => import('./components/apis/apis.component').then(m => m.ApisComponent)
      },
      {
        path: 'projects',
        loadComponent: () => import('./components/projects/projects.component').then(m => m.ProjectsComponent)
      },
      {
        path: 'test',
        loadComponent: () => import('./components/test/test.component').then(m => m.TestComponent)
      },
      {
        path: 'chat',
        loadComponent: () => import('./components/chat/chat.component').then(c => c.ChatComponent)
      },
      {
        path: 'spark',
        loadComponent: () => import('./components/spark/spark.component').then(m => m.SparkComponent)
      },
      {
        path: 'realtime-chat/:sessionId',
        loadComponent: () => import('./components/chat/realtime-chat.component').then(c => c.RealtimeChatComponent),
        canActivate: [authGuard ],
        data: { title: 'Real-time Chat' }
      },
      {
        path: '',
        redirectTo: 'projects',
        pathMatch: 'full'
      }      
    ]
  },
  {
    path: '**',
    redirectTo: ''
  }
];