Sweden Loading... India Loading... Module structure PhoenixEMS UI - Module DependenciesAppModule (Root)«Rectangle»SharedModule«Rectangle»Components ModulePipe ModuleDirective ModuleIndexModule«Rectangle»EdgeModule«Rectangle»LiveModuleLive WidgetsController WidgetsHistoryModuleHistory ChartsSettingsModuleApp ManagementComponent ManagementUserModule«Rectangle»ChangelogModule«Rectangle»Third Party Modules«Rectangle»Lazy Loaded ModulesStorage ModuleHeat Pump ModuleRouting Hierarchy«Rectangle»AppComponentAppRoutingModuleBootstrap Component- Platform initialization- Language setup- Global error handlingServiceWebsocketUserServiceLoggerDataServiceProvides:- Common services- Reusable components- Pipes & Directives- Base classes- Utilities Imported by all feature modulesChart ComponentsEdge ComponentsFooter/HeaderModal ComponentsFlat WidgetsForm ComponentsNavigation ComponentsUnitConversion PipeDateFormat PipeSign PipeKeyValue PipeAutoHide DirectivePermission DirectiveLoginComponentOverviewComponentRegistrationModuleFilterModuleEntry point features:- User authentication- Edge selection- Registration- Overview dashboardEdgeComponentCore device management:- Live monitoring- Historical data- Configuration- System managementLiveComponentLiveDataServiceEnergyMonitorModuleCommon WidgetsStorage WidgetGrid WidgetConsumption WidgetProduction WidgetWeather WidgetEVCS ModuleEVSE ModuleESS ModulePeak Shaving ModuleHeat ModuleIO ModuleHistoryComponentHistoryParentComponentHistoryDataServiceProduction Chart ModuleConsumption Chart ModuleGrid Chart ModuleStorage Chart ModuleController ChartsSettingsComponentProfileModuleNetworkModuleSystemModuleAlertingModuleChannelsModuleApp ModuleInstall AppSingle AppOAuth ModuleComponent InstallComponent UpdateUserComponentThemeSelectionModuleUser preferences:- Profile settings- Theme selection- Language settingsChangelogViewComponentDisplay application changesand version historyIonicModuleTranslateModuleFormlyModuleChartModuleAngularMyDatePickerModuleNgxSpinnerModuleCookieModuleDeviceDetectorModuleModules loaded on-demandto optimize bundle sizeCommon StorageStorage ChartsStorage HistoryHeat Pump WidgetHeat Pump ChartHeat Pump HistoryAppRoutesRoutes:- / → /index- /login- /overview- /user- /changelog- /device/:edgeId → /device/:edgeId/live- /device/:edgeId/live- /device/:edgeId/history- /device/:edgeId/settingsimportsimportsimportsimportsimportsimportsimportsimportsimportscontainscontainscontainsimportsimportsimportsimportsimportsprovidesprovidesloads dynamicallylazy loadslazy loadsModule TypesRoot ModuleShared ModuleFeature ModuleThird-Party ModuleRouting Import Strategies→ Direct Import⋯> Module Dependency⇢ Lazy Loading Key Characteristics- Modular architecture- Lazy loading for optimization- Shared services & components- Feature-based organizationPhoenixEMS UI - Module DependenciesAppModule (Root)«Rectangle»SharedModule«Rectangle»Components ModulePipe ModuleDirective ModuleIndexModule«Rectangle»EdgeModule«Rectangle»LiveModuleLive WidgetsController WidgetsHistoryModuleHistory ChartsSettingsModuleApp ManagementComponent ManagementUserModule«Rectangle»ChangelogModule«Rectangle»Third Party Modules«Rectangle»Lazy Loaded ModulesStorage ModuleHeat Pump ModuleRouting Hierarchy«Rectangle»AppComponentAppRoutingModuleBootstrap Component- Platform initialization- Language setup- Global error handlingServiceWebsocketUserServiceLoggerDataServiceProvides:- Common services- Reusable components- Pipes & Directives- Base classes- Utilities Imported by all feature modulesChart ComponentsEdge ComponentsFooter/HeaderModal ComponentsFlat WidgetsForm ComponentsNavigation ComponentsUnitConversion PipeDateFormat PipeSign PipeKeyValue PipeAutoHide DirectivePermission DirectiveLoginComponentOverviewComponentRegistrationModuleFilterModuleEntry point features:- User authentication- Edge selection- Registration- Overview dashboardEdgeComponentCore device management:- Live monitoring- Historical data- Configuration- System managementLiveComponentLiveDataServiceEnergyMonitorModuleCommon WidgetsStorage WidgetGrid WidgetConsumption WidgetProduction WidgetWeather WidgetEVCS ModuleEVSE ModuleESS ModulePeak Shaving ModuleHeat ModuleIO ModuleHistoryComponentHistoryParentComponentHistoryDataServiceProduction Chart ModuleConsumption Chart ModuleGrid Chart ModuleStorage Chart ModuleController ChartsSettingsComponentProfileModuleNetworkModuleSystemModuleAlertingModuleChannelsModuleApp ModuleInstall AppSingle AppOAuth ModuleComponent InstallComponent UpdateUserComponentThemeSelectionModuleUser preferences:- Profile settings- Theme selection- Language settingsChangelogViewComponentDisplay application changesand version historyIonicModuleTranslateModuleFormlyModuleChartModuleAngularMyDatePickerModuleNgxSpinnerModuleCookieModuleDeviceDetectorModuleModules loaded on-demandto optimize bundle sizeCommon StorageStorage ChartsStorage HistoryHeat Pump WidgetHeat Pump ChartHeat Pump HistoryAppRoutesRoutes:- / → /index- /login- /overview- /user- /changelog- /device/:edgeId → /device/:edgeId/live- /device/:edgeId/live- /device/:edgeId/history- /device/:edgeId/settingsimportsimportsimportsimportsimportsimportsimportsimportsimportscontainscontainscontainsimportsimportsimportsimportsimportsprovidesprovidesloads dynamicallylazy loadslazy loadsModule TypesRoot ModuleShared ModuleFeature ModuleThird-Party ModuleRouting Import Strategies→ Direct Import⋯> Module Dependency⇢ Lazy Loading Key Characteristics- Modular architecture- Lazy loading for optimization- Shared services & components- Feature-based organization