Navigation Issues in NX Library Migration

Problem

When migrating from standalone NX apps to NX libraries loaded as children in the main gograb-space app, navigation links stop working and redirect to /dashboard instead of the intended routes.

Root Cause

The issue occurs because:

1. NX libraries were originally designed as standalone apps with routes at the root level (e.g., /storage/overview)
2. When loaded as children under /ux-test, the actual routes become /ux-test/storage/overview
3. Navigation methods in library components still use the original absolute paths, which don't exist in the main app

Solution

For RouterLink Navigation

Change absolute paths to relative paths in templates:

<!-- ❌ Wrong - absolute paths -->
<a routerLink="/home">Home</a>
<a routerLink="/storage">Storage</a>

<!-- ✅ Correct - relative paths -->
<a routerLink="home">Home</a>
<a routerLink="storage">Storage</a>

For Programmatic Navigation

Update navigation methods to use the correct absolute path within the main app context:

// ❌ Wrong - uses original library paths
navigateTo(route: string): void {
  this.router.navigateByUrl(route); // e.g., '/storage/overview'
}

// ✅ Correct - prepends the main app context
navigateTo(route: string): void {
  this.router.navigateByUrl(`/ux-test${route}`); // e.g., '/ux-test/storage/overview'
}

For Relative Navigation

If using relative navigation with ActivatedRoute:

// ❌ Wrong - strips too much context
const pathAfterStorage = route.replace('/storage/', '');
this.router.navigate([pathAfterStorage], { relativeTo: this.activatedRoute });

// ✅ Correct - uses full absolute path
this.router.navigateByUrl(`/ux-test${route}`);

Quick Fix Checklist

1. ✅ Check all routerLink attributes - remove leading slashes
2. ✅ Update programmatic navigation methods to prepend /ux-test
3. ✅ Test navigation from library components to ensure routes resolve correctly
4. ✅ Verify no routes fall back to /dashboard redirect

Prevention

When creating new NX libraries that will be loaded as children:

• Use relative paths in templates from the start
• Design navigation methods to be context-aware
• Consider using a base path configuration for easier migration