Routing Structure
This document details the routing configuration and navigation structure of the Digibit ERP system.
Overview
The application uses Angular's router for navigation between different views and features. The routing is centralized in the app.routes.ts file and follows a feature-based approach.
Route Configuration
Main Routes
The application defines routes for various business modules:
| Route Path | Component | Guard | Reuse Strategy |
|---|---|---|---|
/companies |
CompaniesComponent | AuthGuard | N/A |
/company/new |
CompanyComponent | AuthGuard | Enabled |
/company/edit/:id |
CompanyComponent | AuthGuard | Enabled |
/companyNew/new |
CompanyNewComponent | AuthGuard | Enabled |
/companyNew/edit/:id |
CompanyNewComponent | AuthGuard | Enabled |
/currencies |
CurrenciesComponent | AuthGuard | N/A |
/currency/new |
CurrencyComponent | AuthGuard | Enabled |
/currency/edit/:id |
CurrencyComponent | AuthGuard | Enabled |
/currencyNew/new |
CurrencyNewComponent | AuthGuard | Enabled |
/currencyNew/edit/:id |
CurrencyNewComponent | AuthGuard | Enabled |
/operations |
OperationsComponent | AuthGuard | N/A |
/operation/new |
OperationComponent | AuthGuard | Enabled |
/operation/edit/:id |
OperationComponent | AuthGuard | Enabled |
/operationNew/new |
OperationNewComponent | AuthGuard | Enabled |
/operationNew/edit/:id |
OperationNewComponent | AuthGuard | Enabled |
/operationGroups |
OperationGroupsComponent | AuthGuard | N/A |
/operationGroup/new |
OperationGroupComponent | AuthGuard | Enabled |
/operationGroup/edit/:id |
OperationGroupComponent | AuthGuard | Enabled |
/operationGroupNew/new |
OperationGroupNewComponent | AuthGuard | Enabled |
/operationGroupNew/edit/:id |
OperationGroupNewComponent | AuthGuard | Enabled |
/articleGroups |
ArticleGroupsComponent | AuthGuard | N/A |
/articleGroup/new |
ArticleGroupComponent | AuthGuard | Enabled |
/articleGroup/edit/:id |
ArticleGroupComponent | AuthGuard | Enabled |
/articleGroupNew/new |
ArticleGroupNewComponent | AuthGuard | Enabled |
/articleGroupNew/edit/:id |
ArticleGroupNewComponent | AuthGuard | Enabled |
/articles |
ArticlesComponent | AuthGuard | N/A |
/article/new |
ArticleComponent | AuthGuard | Enabled |
/article/edit/:id |
ArticleComponent | AuthGuard | Enabled |
/articleNew/new |
ArticleNewComponent | AuthGuard | Enabled |
/articleNew/edit/:id |
ArticleNewComponent | AuthGuard | Enabled |
/articleTypes |
ArticleTypesComponent | AuthGuard | N/A |
/articleType/new |
ArticleTypeComponent | AuthGuard | Enabled |
/articleType/edit/:id |
ArticleTypeComponent | AuthGuard | Enabled |
/articleTypeNew/new |
ArticleTypeNewComponent | AuthGuard | Enabled |
/articleTypeNew/edit/:id |
ArticleTypeNewComponent | AuthGuard | Enabled |
/articleCategories |
ArticleCategoriesComponent | AuthGuard | N/A |
/articleCategory/new |
ArticleCategoryComponent | AuthGuard | Enabled |
/articleCategory/edit/:id |
ArticleCategoryComponent | AuthGuard | Enabled |
/articleCategoryNew/new |
ArticleCategoryNewComponent | AuthGuard | Enabled |
/articleCategoryNew/edit/:id |
ArticleCategoryNewComponent | AuthGuard | Enabled |
/productionOrders |
ProductionOrdersComponent | AuthGuard | N/A |
/productionOrder/new |
ProductionOrderComponent | AuthGuard | Enabled |
/productionOrder/edit/:id |
ProductionOrderComponent | AuthGuard | Enabled |
/productionOrderNew/new |
ProductionOrderNewComponent | AuthGuard | Enabled |
/productionOrderNew/edit/:id |
ProductionOrderNewComponent | AuthGuard | Enabled |
/measurementGroups |
MeasurementGroupsComponent | AuthGuard | N/A |
/measurementGroup/new |
MeasurementGroupComponent | AuthGuard | Enabled |
/measurementGroup/edit/:id |
MeasurementGroupComponent | AuthGuard | Enabled |
/measurementGroupNew/new |
MeasurementGroupNewComponent | AuthGuard | Enabled |
/measurementGroupNew/edit/:id |
MeasurementGroupNewComponent | AuthGuard | Enabled |
/measurements |
MeasurementsComponent | AuthGuard | N/A |
/measurement/new |
MeasurementComponent | AuthGuard | Enabled |
/measurement/edit/:id |
MeasurementComponent | AuthGuard | Enabled |
/measurementNew/new |
MeasurementNewComponent | AuthGuard | Enabled |
/measurementNew/edit/:id |
MeasurementNewComponent | AuthGuard | Enabled |
/documentTypes |
DocumentTypesComponent | AuthGuard | N/A |
/documentType/new |
DocumentTypeComponent | AuthGuard | Enabled |
/documentType/edit/:id |
DocumentTypeComponent | AuthGuard | Enabled |
/documents |
DocumentsComponent | AuthGuard | N/A |
/document/new |
DocumentComponent | AuthGuard | Enabled |
/document/edit/:id |
DocumentComponent | AuthGuard | Enabled |
/documentNew/new |
DocumentNewComponent | AuthGuard | Enabled |
/documentNew/edit/:id |
DocumentNewComponent | AuthGuard | Enabled |
/production |
ProductionComponent | AuthGuard | N/A |
/sensors |
SensorsComponent | AuthGuard | N/A |
/machines |
MachinesComponent | AuthGuard | N/A |
/machine/new |
MachineComponent | AuthGuard | Enabled |
/machine/edit/:id |
MachineComponent | AuthGuard | Enabled |
/machineNew/new |
MachineNewComponent | AuthGuard | Enabled |
/machineNew/edit/:id |
MachineNewComponent | AuthGuard | Enabled |
/billOfMaterials |
BillOfMaterialsComponent | AuthGuard | N/A |
/billOfMaterial/new |
BillOfMaterialComponent | AuthGuard | Enabled |
/billOfMaterial/edit/:id |
BillOfMaterialComponent | AuthGuard | Enabled |
/billOfMaterialNew/new |
BillOfMaterialNewComponent | AuthGuard | Enabled |
/billOfMaterialNew/edit/:id |
BillOfMaterialNewComponent | AuthGuard | Enabled |
/dynamicFields/new |
DynamicFieldGeneratorComponent | AuthGuard | N/A |
/dynamicFields/edit/:id |
DynamicFieldGeneratorComponent | AuthGuard | N/A |
/settings |
SettingsComponent | AuthGuard | N/A |
/documentConverter |
DocumentConverterComponent | AuthGuard | N/A |
/planning |
PlanningSimpleComponent | AuthGuard | N/A |
/dashboard |
DashboardComponent | AuthGuard | N/A |
/pageBuilder/:type |
PageBuilderComponent | AuthGuard | N/A |
/login |
LoginComponent | None | N/A |
/account |
AccountComponent | AuthGuard | N/A |
/ |
Redirect to /companies |
N/A | N/A |
Route Guards
AuthGuard
The application implements an AuthGuard that protects most routes:
- Purpose: Ensures users are authenticated before accessing protected routes
- Behavior: Redirects unauthenticated users to the login page
- Implementation: Applied to most routes except login and public pages
Route Reuse Strategy
The application implements a custom route reuse strategy for certain routes:
- Purpose: Preserves component state when navigating between similar views
- Implementation: Tab-like interface using the
TabService - Routes: Applied to form routes (e.g.,
/company/new,/company/edit/:id) - Configuration: Set via
data: { reuse: true }in route configuration
Navigation Patterns
Main Navigation
The main navigation is handled by the HeaderComponent using PrimeNG's Menubar:
- Companies
- Articles (with submenu)
- Documents (with submenu)
- Planning
- Production (with submenu)
- Dashboard
- Import functionality
- Settings
- Page Builder
- Language selector
- Logout
Tab Management
The application implements a tab-like interface at the bottom using PrimeNG's Dock component:
- Purpose: Allows users to keep multiple forms open simultaneously
- Implementation: Managed by
TabService - Visual Indicator: Shows open routes as tabs in the dock
- Close Functionality: Each tab has a close button
Route Parameters
The application uses route parameters for editing existing records:
- Pattern:
/entity/edit/:id(e.g.,/company/edit/123) - Purpose: Passes the ID of the entity to be edited
- Usage: Components retrieve the ID from route parameters to load specific data
Dynamic Routes
Page Builder
The application includes a dynamic route for the page builder:
- Route:
/pageBuilder/:type - Parameter:
typespecifies the entity type to build forms for - Component:
PageBuilderComponent - Usage: Allows dynamic form creation for different entity types
Authentication-Related Routes
Login Flow
- Login Route:
/login- Public route for user authentication - Protected Routes: All other routes (except explicitly marked) require authentication
- Logout: Handled through the auth service, redirects to login
Account Management
- Account Route:
/account- Protected route for user account management - Access: Requires authentication
Route Organization
Feature-Based Grouping
Routes are organized by business features:
- Company Management: Companies and related entities
- Product Management: Articles, categories, groups, types
- Document Management: Documents, types, and workflows
- Production Management: Operations, orders, BOMs, machines
- System Configuration: Settings, currencies, measurements
- Planning: Production planning and scheduling
- Utilities: Dashboard, import, page builder
Route Naming Conventions
- List Views:
/entities(e.g.,/articles,/companies) - Creation Views:
/entity/new(e.g.,/article/new,/company/new) - Edit Views:
/entity/edit/:id(e.g.,/article/edit/123) - Alternative Creation:
/entityNew/newfor alternative creation flows
Route Data
Routes can include additional metadata:
- Reuse Strategy:
data: { reuse: true }enables tab-like behavior - Permissions: Could be extended for role-based access control
- Titles: Could be used for dynamic page titles
Error Handling
Route Protection
- Unauthorized access attempts redirect to login
- Invalid route parameters handled gracefully
- Missing data scenarios managed with appropriate UI feedback
Navigation Guards
- CanActivate guards for route protection
- CanDeactivate guards could be implemented for unsaved changes warning
- Resolve guards could be used for pre-loading data
Performance Considerations
Lazy Loading
Currently, the application appears to use eager loading. Future enhancements could include:
- Feature modules with lazy loading
- Preloading strategies for better UX
- Code splitting for improved initial load times
Route Optimization
- Efficient route matching
- Proper cleanup in route components
- Memory management for reusable components
This routing structure provides a comprehensive navigation system that supports the complex business requirements of the Digibit ERP system while maintaining good user experience and security.