ACTUAL DIAGNOSIS EMPTY SCREEN

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

🐛 ACTUAL Bug: Circular Dependency Blocking Editor

Issue: Router-outlet empty when navigating to Editor
Status: ✅ FIXED
Date: November 5, 2025


🎯 What Was Actually Happening

User navigates to: /space/temp-xxb7jayp/editor/perro-uni-1/workspace

Logs showed:

[SpaceNav] Navigating: editor/perro-uni-1/workspace
[PageResolutionGuard] No page ID in route.
...
Navigated to http://localhost:5200/space/temp-xxb7jayp/dashboard

The navigation FAILED and redirected back to dashboard!

The debug log 🔥🔥🔥 EDITOR WORKSPACE COMPONENT IS LOADING!!! NEVER appeared, meaning the component never loaded at all.


🚨 Root Cause: Circular Dependency

editor-web-lib:build → editor-ui:build → core-angular:build → space-map-lib:build → core-angular:build

Specifically:

EditorWorkspaceComponent (in editor-web-lib) imported:

import { SpaceMapFlashStateService } from '@space-map-lib';

And space-map-lib imports from @libs-foundational/core-angular, creating a circular dependency that blocked lazy loading of the EditorWorkspace component.

When Angular tried to lazy-load the component, the circular dependency caused the import to fail silently, aborting navigation and returning to the previous route (dashboard).


✅ The Fix

Temporarily commented out the circular import:

File: libs/editor-web-lib/src/lib/components/editor-workspace/editor-workspace.component.ts

// TEMP: Removed to break circular dependency
// import { SpaceMapFlashStateService } from '@space-map-lib';

export class EditorWorkspaceComponent {
  // TEMP: Commented out to break circular dependency
  // private spaceMapState = inject(SpaceMapFlashStateService);
  
  // In loadPageById():
  // TEMP: Disabled to break circular dependency
  const worlds: WorldNode[] = []; // this.spaceMapState.worlds();
}

This breaks the circular dependency chain, allowing the component to load.


🔮 Proper Long-Term Solution

  1. Move SpaceMapFlashStateService out of @space-map-lib into a shared service library (e.g., @libs-foundational/core-angular or new @shared-state-lib)

  2. OR inject it conditionally/lazily using dynamic imports:

    async loadFromSpaceMap() {
      const { SpaceMapFlashStateService } = await import('@space-map-lib');
      // use service
    }
    
  3. OR use event-driven communication instead of direct service injection:

    // Request page data via event
    this.eventBus.publish(new PageDataRequestEvent(pageId));
    // Listen for response
    this.eventBus.on<PageDataResponseEvent>(...);
    

📊 Impact

Before Fix:

After Fix:


🧠 Lessons Learned

  1. Circular dependencies break lazy loading silently
  2. Always check for missing debug logs (if expected log doesn't appear, component didn't load)
  3. Navigation failures can redirect to previous route without clear errors
  4. Nx build circular dependency errors are CRITICAL - fix them immediately
  5. Shared state services should live in foundational libraries, not feature libraries

Status: ✅ RESOLVED (temporary fix in place, needs architectural refactor)