Docs Angular: Localhost 5010 Cache Error Fix

Session: editor2-19.5
Date: January 5, 2026
Status: ✅ Fixed and Verified

🚨 Problem

The docs-angular app running on localhost:5010 was experiencing critical errors:

GET http://localhost:5010/@fs/Users/fguijarro/developer/repos/editor/.nx/cache/20.3.6/docs-angular/vite/deps/chunk-PFHFCCRN.js?v=16edb161 
net::ERR_ABORTED 504 (Outdated Optimize Dep)

Symptoms

• ✅ App worked in Cursor's internal browser
• ❌ App failed in external browsers (Safari, Chrome, Firefox)
• ❌ JavaScript modules failed to load with 504 errors
• ❌ Console showed "Outdated Optimize Dep" errors

🔍 Root Cause Analysis

The issue was caused by three interconnected problems:

1. Stale Vite Dependency Cache

• Angular's esbuild dev server uses Vite for dependency optimization
• The .nx/cache/ directory contained outdated optimized dependencies
• External browsers tried to load these stale cached files, resulting in 504 errors

2. Missing NGXS Type Declarations

// ❌ Before (caused TypeScript errors)
private readonly store = inject(Store);

// ✅ After (properly typed)
private readonly store: Store = inject(Store);

File: libs/libs-foundational/storage-system/src/angular/ngxs/ngxs-state-persistence.service.ts

3. Accidentally Deleted NGXS Packages

• During cache clearing, node_modules/@ngxs was removed
• This deleted the actual NGXS packages, causing module resolution errors

✅ Solution Applied

Step 1: Clear All Caches

# Clear NX cache
nx reset

# Remove Angular build cache
rm -rf dist/ .angular/

# Stop NX daemon
npx nx daemon --stop

# Clear Vite optimization cache
rm -rf .nx/cache

Step 2: Fix TypeScript Errors

File: libs/libs-foundational/storage-system/src/angular/ngxs/ngxs-state-persistence.service.ts

@Injectable({
  providedIn: 'root'
})
export class NgxsStatePersistenceService {
  private readonly store: Store = inject(Store);  // ✅ Added type annotation
  private readonly storage = inject(StorageService);
  // ... rest of the service
}

Step 3: Reinstall NGXS

yarn add @ngxs/store @ngxs/storage-plugin --ignore-engines

Installed versions:

• @ngxs/[email protected]
• @ngxs/[email protected]

Step 4: Restart Dev Server

yarn serve:docs:basic  # Runs: nx serve docs-angular

📊 Verification

Browser Console (After Fix)

✅ No errors - Clean initialization:

[vite] connected.
🚀 Intelligent Storage System Initializing
✅ Storage Registry: Initialization complete
✅ Generated 2104 dynamic routes
✅ Docs system initialized successfully

Server Status

• ✅ Running on http://localhost:5010/
• ✅ HTTP 200 responses
• ✅ All JavaScript modules loading correctly
• ✅ Works in all browsers (external and Cursor's internal)

🎯 Why It Happened

The "Outdated Optimize Dep" error is a Vite-specific issue that occurs when:

1. Development server is running with optimized dependencies cached
2. Dependencies change (package updates, cache corruption, etc.)
3. Browser tries to load the cached optimized chunks
4. Vite detects mismatch between requested version and cached version
5. Server returns 504 indicating the optimization is outdated

The fix required clearing all three cache layers:

• NX build cache (.nx/cache/)
• Angular compiler cache (.angular/)
• Vite optimization cache (within .nx/cache/)

🔄 Files Modified

1. libs/libs-foundational/storage-system/src/angular/ngxs/ngxs-state-persistence.service.ts
   • Added TypeScript type annotation to Store injection
   • Fixed: TS2339: Property 'select' does not exist on type 'unknown'

📝 Related Documentation

• Storage System: docs/english/GoGrab-Space/libs/libs-foundational/storage-system/
• NGXS Migration Plan: docs/english/sessions/session-19/19.5-ngxs-to-autoflashstate-migration-plan.md
• Docs Angular: docs/english/Docs-angular/

🚀 Future Improvements

Recommended: Migrate from NGXS to autoFlashState

The current implementation uses NGXS for state persistence in docs-angular, but the project has a more modern solution:

Current: NGXS + Storage Plugin
Recommended: autoFlashState from @storage-system

Benefits:

• ✅ Zero configuration
• ✅ Automatic persistence
• ✅ Better performance (0.3ms cache hits)
• ✅ Consistent with project architecture
• ✅ No external dependencies

See: 19.5-ngxs-to-autoflashstate-migration-plan.md

✅ Status: Complete

The docs-angular app is now running correctly on localhost:5010 in all browsers with no errors.

Next Steps: Consider NGXS migration (see migration plan document)