Circular Dependencies Fix
How we resolved circular dependencies between widget-builder and core-angular
Circular Dependencies Fix 🔄
Problem
A circular dependency was detected between widget-builder and core-angular.
libs-widgets/widget-builder
→ core-angular
→ @libs-ui/auth-ui
→ libs-ui-core/ui-core
→ libs-widgets/widgets
→ libs-widgets/widget-builder
Solution
1. Specific File Imports
Changed from barrel exports to specific file paths:
// ❌ Before
import { UniverseContextService, API_BASE_URL } from '@libs-foundational/core-angular';
// ✅ After
import { UniverseContextService } from '@libs-foundational/core-angular/lib/services/universe-context.service';
import { API_BASE_URL } from '@libs-foundational/core-angular/lib/tokens/api-base.token';
2. Removed Unused Imports
// ❌ Removed
import { WidgetsEmbeddableRegistryService, EmbeddableDefinition, PropertyGroup } from '@libs-widgets/widgets';
3. Local Interface Definitions
// ✅ Defined locally to avoid import
interface StoragePropertyGroup {
category: string;
properties: Array<{ key: string; value: unknown }>;
}
Files Modified
widget-builder-workspace.component.ts- Fixed importswidget-live-preview.component.ts- Removed unused importsspacing-properties-group.component.ts- Changed import path
Prevention
✅ Use specific file imports when dealing with cross-library dependencies
✅ Remove unused imports immediately
✅ Define local interfaces when possible
✅ Avoid barrel exports for deeply nested dependencies
Result: Clean build, no circular dependencies detected.