@cci-web/core - Context-Aware Services

🎯 Overview

This library provides context-aware services that automatically detect which application context they're running in and adjust their behavior accordingly.

🚀 Key Features

Context Detection

• Provider-first approach: APP_CONFIG provider takes priority
• Automatic fallback: Context detection when no provider available
• No configuration conflicts between different apps
• SSR-safe with platform detection

Supported Contexts

• MFE Search: localhost:6201 → appName: "mfe-search"
• Shell: localhost:6200 → appName: "shell"

📦 Available Services

ContextAwareApiService

import { ContextAwareApiService } from "@cci-web/core";

@Injectable()
export class MyService {
  constructor(private api: ContextAwareApiService) {}

  getData() {
    // Automatically uses correct app-name header based on context
    return this.api.get("/api/data");
  }
}

Features:

• ✅ Automatic app-name header based on context
• ✅ Automatic gateway API detection
• ✅ All standard HTTP methods (GET, POST, PUT, DELETE)
• ✅ Built-in caching and error handling

ContextAwareAppInitializeService

import { ContextAwareAppInitializeService } from "@cci-web/core";

@Injectable()
export class MyService {
  constructor(private appInit: ContextAwareAppInitializeService) {}

  initialize() {
    return this.appInit.initialize();
  }
}

ContextAwareBrowserRefreshService

import { ContextAwareBrowserRefreshService } from "@cci-web/core";

@Injectable()
export class MyService {
  constructor(private browserRefresh: ContextAwareBrowserRefreshService) {}

  checkRefresh() {
    if (this.browserRefresh.isBrowserRefresh) {
      // Handle browser refresh
    }
  }
}

🔍 Context Debug

Use the ContextDebugComponent to see real-time context information:

import { ContextDebugComponent } from "@cci-web/core";

@Component({
  imports: [ContextDebugComponent],
  template: '<app-context-debug></app-context-debug>'
})

🧪 Testing

Test Context Detection

1. Direct MFE Access: https://localhost:6201/context-test
   • Expected: appName: "mfe-search"
2. Via Shell: https://localhost:6200/context-test
   • Expected: appName: "shell"

Test API Calls

• MFE Search: API calls will use app-name: mfe-search
• Shell: API calls will use app-name: shell

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐
│   MFE Search    │    │      Shell      │
│ localhost:6201  │    │ localhost:6200  │
└─────────────────┘    └─────────────────┘
         │                       │
         └───────┬───────────────┘
                 │
    ┌─────────────────────────────┐
    │    @cci-web/core            │
    │  Context-Aware Services     │
    │                             │
    │  • Auto-detect context      │
    │  • Auto-set app-name        │
    │  • Auto-set gateway         │
    │  • SSR-safe                 │
    └─────────────────────────────┘

🔧 Configuration

No Manual Configuration Required

The services automatically detect context from:

• window.location.href (browser only)
• Platform detection (SSR safe)

Manual Override (Optional)

// Set custom gateway API if needed
this.apiService.setGatewayApi("https://custom-gateway.com");

🚨 Important Notes

SSR Compatibility

• All services are SSR-safe
• window.location.href only accessed in browser
• Fallback values provided for server-side rendering

Context Detection Logic

private getContextAppName(): string {
  if (isPlatformBrowser(this._platformId)) {
    const currentUrl = window.location.href;

    if (currentUrl.includes("localhost:6201") || currentUrl.includes("mfe-search")) {
      return "mfe-search";
    }

    if (currentUrl.includes("localhost:6200") || currentUrl.includes("shell")) {
      return "shell";
    }
  }

  return "mfe-search"; // Default fallback
}

📚 Migration Guide

From Local Services

// Before (local service)
import { ApiService } from "./core/services/api.service";

// After (context-aware)
import { ContextAwareApiService } from "@cci-web/core";

Benefits

• ✅ No more APP_NAME conflicts
• ✅ Automatic context detection
• ✅ Shared codebase
• ✅ Consistent behavior

🐛 Troubleshooting

Context Not Detected

1. Check if URL contains expected patterns
2. Verify service is injected correctly
3. Use ContextDebugComponent to debug

Wrong App Name

1. Verify URL patterns in detection logic
2. Check if service is properly imported
3. Ensure no local service overrides

🔮 Future Enhancements

• [ ] Environment-based context detection
• [ ] Custom context patterns
• [ ] Context change events
• [ ] Performance optimizations