Project Switcher Same-URL Navigation Fix

Fix for project switcher when navigating to the same URL

⚡ Project Switcher Same-URL Navigation Fix

Date: October 28, 2025
Time: 12:20 PM PST
Status: ✅ FIXED
Purpose: Force content reload when switching projects at the same root URL

🐛 The Critical Issue

User Report:

"No change. Nothing happens when we switch a project via @project-switcher.component.ts"

Console Evidence:

project-switcher.component.ts:652 🚀 Navigating to: /
project-switcher.component.ts:656 ✅ Navigation result: false  ← THE PROBLEM!

Root Cause:

Angular Router returns false when navigating to the same URL!

Scenario:

User is on "Architecture" project → URL: /
User switches to "Backend Api" project → Target URL: /
Angular Router sees: "Already at /, no navigation needed"
Returns false
Content doesn't reload with new project context!

Why This Happens:

In our project-scoped architecture:

ALL projects live at the root (/ or /es)
Project context is stored in state, not URL
Switching projects = same URL, different state
Angular Router doesn't detect the state change as a navigation

This broke ALL project switching when already at root! 🚨

✅ The Solution

Strategy: Force Navigation Reload

When already at the root URL, we use a "navigate away and back" trick:

File: apps/docs-angular/src/app/shared/project-switcher/project-switcher.component.ts

Lines 655-680:

try {
  // 🔧 FIX: Force navigation even if we're already at the root
  // Angular Router returns false if navigating to same URL
  // Use navigateByUrl with skipLocationChange + onSameUrlNavigation trick
  
  const isAlreadyAtRoot = this.router.url === rootPath || this.router.url === rootPath + '/';
  
  if (isAlreadyAtRoot) {
    console.log(`⚡ Already at root, forcing content reload...`);
    
    // Strategy 1: Navigate away and back to force reload
    await this.router.navigateByUrl('/select-project', { skipLocationChange: true });
    await this.router.navigateByUrl(rootPath);
    
    console.log(`✅ Forced navigation completed`);
  } else {
    console.log(`🚀 Normal navigation (not at root)`);
    const navResult = await this.router.navigate([rootPath]);
    console.log(`✅ Navigation result:`, navResult);
  }

  console.log(`🎉 Project switched successfully to: ${projectId}`);
} catch (navError) {
  console.error(`❌ Navigation FAILED:`, navError);
  throw navError;
}

🔄 How It Works

Flow 1: Already at Root (Most Common):

Current URL: /
Target URL: /
Project State: Architecture → Backend Api

1. Detect we're already at root ✅
   isAlreadyAtRoot = true

2. Navigate to /select-project (hidden) ✅
   { skipLocationChange: true } // URL stays at /
   
3. Navigate back to / ✅
   This triggers route guards and component reloads

4. DynamicPageComponent reads new project from state ✅
   Project context: Backend Api

5. Content reloads with new project! ✅

Flow 2: Not at Root (Edge Case):

Current URL: /some-page
Target URL: /
Project State: Architecture → Backend Api

1. Detect we're NOT at root ✅
   isAlreadyAtRoot = false

2. Normal navigation ✅
   await this.router.navigate([rootPath])

3. Content loads with new project ✅

🧪 Testing

Test 1: Project Switching at Root:

1. Current project: "Architecture" at /
2. Click project switcher
3. Select "Backend Api"

Expected Console Output:
✅ Project selected: english/Backend-Api
✅ SelectProject action completed successfully
🚀 Navigating to: /
🔍 Current URL: /
⚡ Already at root, forcing content reload...
✅ Forced navigation completed
🎉 Project switched successfully to: english/Backend-Api

Expected Result:
✅ Content reloads
✅ Shows Backend Api documentation
✅ Navigation sidebar updates
✅ URL stays at /

Test 2: Multiple Quick Switches:

1. Switch to "AI Instructions"
2. Wait for load
3. Switch to "Architecture"
4. Wait for load
5. Switch to "Backend Api"

Expected:
✅ Each switch reloads content correctly
✅ No stale content
✅ State always in sync with displayed content

Test 3: Spanish Language:

1. Switch to Spanish
2. Current project: "Arquitectura" at /es
3. Switch to "Backend Api"

Expected Console Output:
🚀 Navigating to: /es
🔍 Current URL: /es
⚡ Already at root, forcing content reload...
✅ Forced navigation completed

Expected Result:
✅ Content reloads in Spanish

📊 Before vs After

Before Fix ❌:

User at "Architecture" (/)
  ↓
Select "Backend Api" (also /)
  ↓
router.navigate(['/']) → returns false
  ↓
No navigation triggered
  ↓
DynamicPageComponent doesn't re-initialize
  ↓
Still shows Architecture content ❌
User confused, thinks it's broken

After Fix ✅:

User at "Architecture" (/)
  ↓
Select "Backend Api" (also /)
  ↓
Detect: Already at root
  ↓
Navigate to /select-project (hidden)
  ↓
Navigate back to /
  ↓
DynamicPageComponent re-initializes ✅
  ↓
Reads new project from state ✅
  ↓
Shows Backend Api content ✅
User happy! 🎉

🎯 Key Technical Points

Why `skipLocationChange: true`?

await this.router.navigateByUrl('/select-project', { skipLocationChange: true });

Navigates internally without updating browser URL
User doesn't see URL flicker to /select-project
Preserves browser history (no extra entries)
Smooth UX with no visual artifacts

Why Two Navigations?

// Step 1: Navigate away (hidden)
await this.router.navigateByUrl('/select-project', { skipLocationChange: true });

// Step 2: Navigate back (visible)
await this.router.navigateByUrl(rootPath);

Reason: Angular Router caches the component state. Navigating away forces:

Component destruction (Architecture context cleared)
Route guard re-evaluation
Component re-initialization (Backend Api context loaded)

Alternative Considered: onSameUrlNavigation: 'reload' in router config

Rejected: Would reload ALL same-URL navigations (breaking other features)
Our Solution: Selective reload only for project switching

🔗 Related Architecture

Project-Scoped Root URLs:

All projects at same URL (/ or /es)
Project context in ProjectSelectionState
Content determined by state, not URL

Why This Is Necessary:

In traditional multi-page apps:

Different URLs → Different content
Router automatically reloads