Angular Module Architecture

Overview

The Gauzy frontend is built with Angular, organized into lazy-loaded feature modules:

Diagram source

graph TB
    App[AppModule] --> Core[CoreModule]
    App --> Shared[SharedModule]
    App --> Pages[PagesModule]
    Pages --> Dashboard[DashboardModule]
    Pages --> TimeTracking[TimeTrackingModule]
    Pages --> Tasks[TasksModule]
    Pages --> Projects[ProjectsModule]
    Pages --> Invoices[InvoicesModule]
    Pages --> Employees[EmployeesModule]
    Pages --> Contacts[ContactsModule]
    Pages --> Settings[SettingsModule]

Module Types

Core Module

Provides application-wide singletons:

• Authentication service
• HTTP interceptors
• Route guards
• Error handling service
• Store services

@NgModule({
  providers: [AuthService, AuthGuard, ServerConnectionService, Store],
})
export class CoreModule {}

Shared Module

Reusable components used across feature modules:

• Date pickers
• Data tables
• Form controls
• Modal dialogs
• Status badges
• User avatar components

Feature Modules

Each feature is a lazy-loaded module:

// app-routing.module.ts
const routes: Routes = [
  {
    path: "tasks",
    loadChildren: () =>
      import("./tasks/tasks.module").then((m) => m.TasksModule),
  },
  {
    path: "employees",
    loadChildren: () =>
      import("./employees/employees.module").then((m) => m.EmployeesModule),
  },
];

Related Pages

• Frontend Architecture — overview
• UI Components — component library
• State Management — state patterns