Chapter 23: Advanced Architecture: Microfrontends, WebSockets, and Feature Toggles

# Ensure you have a recent Angular CLI (v18+)
npm install -g @angular/cli@latest

# Create a new workspace
ng new microfrontend-workspace --no-standalone --skip-git --skip-install

# Navigate into the workspace
cd microfrontend-workspace

# Add Native Federation to your workspace - this creates the initial host setup
# For Angular 18+, Native Federation is the recommended approach.
ng add @angular-architects/native-federation@latest --project shell --port 4200 --type host

ng generate application products --standalone --skip-git --skip-install
ng add @angular-architects/native-federation@latest --project products --port 4201 --type remote

// projects/products/federation.config.ts
import { withNativeFederation } from '@angular-architects/native-federation/webpack';

export default withNativeFederation({
  name: 'products', // Unique name for this remote
  exposes: {
    // We expose a standalone component
    './Component': './projects/products/src/app/products.component.ts',
  },
  // Add any shared dependencies here.
  // Native Federation tries to infer common dependencies, but explicit sharing is good.
  shared: {
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    // Add any other libraries you want to ensure are loaded only once
  },
});

// projects/products/src/app/products.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-products',
  template: `
    <div class="products-container">
      <h2>Products Microfrontend</h2>
      <p>This content is loaded dynamically from the Products remote app!</p>
      <ul>
        <li>Product A</li>
        <li>Product B</li>
        <li>Product C</li>
      </ul>
      <button (click)="buyProduct()">Buy Something!</button>
    </div>
  `,
  styles: `
    .products-container {
      border: 2px dashed #007bff;
      padding: 15px;
      margin: 10px;
      background-color: #e6f2ff;
      border-radius: 8px;
    }
  `,
})
export class ProductsComponent {
  buyProduct() {
    alert('Product bought from the remote app!');
  }
}

// projects/shell/federation.config.ts
import { withNativeFederation } from '@angular-architects/native-federation/webpack';

export default withNativeFederation({
  name: 'shell',
  remotes: {
    // Point to the products remote's entry point
    products: 'http://localhost:4201/remoteEntry.json',
  },
  shared: {
    // Ensure core Angular and RxJS libraries are shared as singletons
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  },
});

// projects/shell/src/app/app.routes.ts
import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation';
import { HomeComponent } from './home/home.component'; // Create a simple home component

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'products',
    loadComponent: () =>
      loadRemoteModule('products', './Component').then((m) => m.ProductsComponent),
  },
  // ... other routes
];

// projects/shell/src/app/home/home.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  standalone: true,
  imports: [CommonModule, RouterLink],
  selector: 'app-home',
  template: `
    <div class="shell-home">
      <h1>Welcome to the Angular Shell App!</h1>
      <p>This is the main application acting as a host for microfrontends.</p>
      <nav>
        <a routerLink="/products">Go to Products Microfrontend</a>
      </nav>
    </div>
  `,
  styles: `
    .shell-home {
      padding: 20px;
      text-align: center;
      background-color: #f0f0f0;
      border-bottom: 1px solid #ccc;
    }
    nav a {
      margin: 0 10px;
      padding: 8px 15px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    nav a:hover {
      background-color: #0056b3;
    }
  `,
})
export class HomeComponent {}

// projects/shell/src/app/app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: `
    <header>
      <h1>My Awesome App (Shell)</h1>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
  `,
  styles: `
    header {
      background-color: #333;
      color: white;
      padding: 15px;
      text-align: center;
    }
    main {
      padding: 20px;
    }
  `,
})
export class AppComponent {}

ng generate library shared-auth --standalone

// projects/shared-auth/src/lib/auth.service.ts
import { Injectable, signal } from '@angular/core';

export interface User {
  id: string;
  name: string;
  roles: string[];
}

@Injectable({
  providedIn: 'root', // This ensures it's a true singleton when provided by Native Federation
})
export class AuthService {
  private _currentUser = signal<User | null>(null);
  currentUser = this._currentUser.asReadonly(); // Expose as a readonly signal

  constructor() {
    console.log('AuthService instance created!'); // To observe singleton behavior
    // Simulate loading user from session storage
    const storedUser = localStorage.getItem('currentUser');
    if (storedUser) {
      this._currentUser.set(JSON.parse(storedUser));
    }
  }

  login(username: string, password: string): void {
    // Simulate API call
    if (username === 'test' && password === 'password') {
      const user: User = { id: '123', name: 'Test User', roles: ['admin', 'viewer'] };
      this._currentUser.set(user);
      localStorage.setItem('currentUser', JSON.stringify(user));
      console.log('User logged in:', user);
    } else {
      console.error('Login failed');
      this._currentUser.set(null);
    }
  }

  logout(): void {
    this._currentUser.set(null);
    localStorage.removeItem('currentUser');
    console.log('User logged out');
  }

  isLoggedIn(): boolean {
    return this._currentUser() !== null;
  }

  hasRole(role: string): boolean {
    return this._currentUser()?.roles.includes(role) ?? false;
  }
}

// projects/products/federation.config.ts (excerpt)
import { withNativeFederation } from '@angular-architects/native-federation/webpack';

export default withNativeFederation({
  name: 'products',
  exposes: {
    './Component': './projects/products/src/app/products.component.ts',
    './AuthService': './projects/shared-auth/src/lib/auth.service.ts', // Expose the service
  },
  // ... rest of the config
});

// projects/shell/src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation'; // Import loadRemoteModule

// We'll dynamically import AuthService from the products remote
// This is a type-only import for IntelliSense. The actual module is loaded at runtime.
import type { AuthService as ProductsAuthService } from '../../../shared-auth/src/lib/auth.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink], // Add RouterLink for navigation
  template: `
    <header>
      <h1>My Awesome App (Shell)</h1>
      <nav>
        <a routerLink="/">Home</a> |
        <a routerLink="/products">Products</a>
      </nav>
      <div class="auth-status">
        @if (authService.isLoggedIn()) {
          <span>Welcome, {{ authService.currentUser()?.name }}!</span>
          <button (click)="logout()">Logout</button>
        } @else {
          <span>Not logged in</span>
          <button (click)="login()">Login (test/password)</button>
        }
      </div>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
  `,
  styles: `
    header {
      background-color: #333;
      color: white;
      padding: 15px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header h1 { margin: 0; }
    header nav a {
      color: white;
      margin: 0 10px;
      text-decoration: none;
    }
    .auth-status {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .auth-status button {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
    }
    .auth-status button:hover {
      background-color: #218838;
    }
    main {
      padding: 20px;
    }
  `,
})
export class AppComponent {
  // Use a temporary service placeholder until the actual AuthService is loaded
  authService!: ProductsAuthService;

  constructor() {
    // Dynamically load the AuthService from the 'products' remote
    loadRemoteModule('products', './AuthService').then((m) => {
      // The service is providedIn: 'root', so Angular's DI will ensure a single instance.
      // We need to manually get it from the injector if we want to use it here.
      // For components, you'd just inject it normally after the remote is loaded.
      // For this example, we'll assign it directly.
      this.authService = inject(m.AuthService);
      console.log('AuthService loaded in shell:', this.authService);
    });
  }

  login() {
    this.authService.login('test', 'password');
  }

  logout() {
    this.authService.logout();
  }
}

// projects/products/src/app/products.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from '../../../../shared-auth/src/lib/auth.service'; // Import directly from the shared lib for type safety

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-products',
  template: `
    <div class="products-container">
      <h2>Products Microfrontend</h2>
      <p>This content is loaded dynamically from the Products remote app!</p>
      @if (authService.isLoggedIn()) {
        <p>Hello, {{ authService.currentUser()?.name }} from Products MF!</p>
        <p>You have roles: {{ authService.currentUser()?.roles.join(', ') }}</p>
        @if (authService.hasRole('admin')) {
          <p class="admin-feature">Admin-only feature visible!</p>
        }
      } @else {
        <p>Please log in from the Shell to see personalized product info.</p>
      }
      <ul>
        <li>Product A</li>
        <li>Product B</li>
        <li>Product C</li>
      </ul>
      <button (click)="buyProduct()">Buy Something!</button>
    </div>
  `,
  styles: `
    .products-container {
      border: 2px dashed #007bff;
      padding: 15px;
      margin: 10px;
      background-color: #e6f2ff;
      border-radius: 8px;
    }
    .admin-feature {
      font-weight: bold;
      color: #dc3545;
    }
  `,
})
export class ProductsComponent {
  authService = inject(AuthService); // Inject the shared service

  buyProduct() {
    if (this.authService.isLoggedIn()) {
      alert(`Product bought by ${this.authService.currentUser()?.name}!`);
    } else {
      alert('Please log in to buy products!');
    }
  }
}

# In your main application (e.g., shell or a new `core` library)
ng generate service websocket/notification

// projects/shell/src/app/websocket/notification.service.ts
import { Injectable, inject, OnDestroy } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { Observable, timer, Subject, EMPTY, BehaviorSubject } from 'rxjs';
import {
  retryWhen,
  tap,
  delayWhen,
  switchMap,
  catchError,
  filter,
  shareReplay,
} from 'rxjs/operators';
import { environment } from '../../environments/environment'; // Assuming you have an environment file

export interface AppNotification {
  id: string;
  message: string;
  timestamp: string;
  type: 'info' | 'warn' | 'error';
}

@Injectable({ providedIn: 'root' })
export class NotificationService implements OnDestroy {
  private socket$!: WebSocketSubject<AppNotification>;
  private messagesSubject = new Subject<AppNotification>();
  private connectionStatusSubject = new BehaviorSubject<boolean>(false);

  public notifications$: Observable<AppNotification>;
  public connectionStatus$: Observable<boolean> = this.connectionStatusSubject.asObservable();

  constructor() {
    this.notifications$ = this.messagesSubject.asObservable().pipe(shareReplay(1));
    this.connect();
  }

  private connect(): void {
    if (this.socket$ && !this.socket$.closed) {
      console.log('WebSocket already connected.');
      return;
    }

    console.log('Attempting to connect to WebSocket...');
    this.socket$ = webSocket<AppNotification>({
      url: environment.websocketUrl, // e.g., 'ws://localhost:3000/notifications'
      openObserver: {
        next: () => {
          console.log('WebSocket connection established!');
          this.connectionStatusSubject.next(true);
        },
      },
      closeObserver: {
        next: (event: CloseEvent) => {
          console.warn('WebSocket connection closed:', event);
          this.connectionStatusSubject.next(false);
          // Only retry if it's not a normal closure (e.g., code 1000)
          if (event.code !== 1000) {
            console.log('Retrying WebSocket connection...');
          }
        },
      },
    });

    this.socket$
      .pipe(
        retryWhen((errors) =>
          errors.pipe(
            tap((err) => console.error('WebSocket error:', err)),
            delayWhen(() => timer(5000)) // Retry after 5 seconds
          )
        ),
        catchError((error) => {
          console.error('WebSocket caught fatal error:', error);
          this.connectionStatusSubject.next(false);
          return EMPTY; // Prevent stream from completing
        })
      )
      .subscribe({
        next: (msg) => this.messagesSubject.next(msg),
        error: (err) => console.error('WebSocket stream error:', err), // This catches errors not handled by retryWhen
        complete: () => {
          console.log('WebSocket stream completed. Reconnecting...');
          this.connectionStatusSubject.next(false);
          // If the stream completes, it means the underlying socket closed and retryWhen didn't handle it
          // This might indicate a server-side termination or a client-side explicit close.
          // For robust apps, you might want to explicitly call connect() again here or let the retryWhen handle it.
          // In this setup, retryWhen handles connection drops, so 'complete' might only happen on explicit close.
        },
      });
  }

  // Send a message (if your server supports it)
  sendMessage(message: Partial<AppNotification>): void {
    if (this.socket$ && !this.socket$.closed) {
      this.socket$.next(message as AppNotification);
    } else {
      console.warn('WebSocket not connected. Cannot send message.');
    }
  }

  disconnect(): void {
    if (this.socket$ && !this.socket$.closed) {
      this.socket$.complete(); // This will close the WebSocket
      this.connectionStatusSubject.next(false);
      console.log('WebSocket disconnected.');
    }
  }

  ngOnDestroy(): void {
    this.disconnect();
  }
}

// projects/shell/src/app/app.component.ts (or any other component)
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink } from '@angular/router';
import { NotificationService, AppNotification } from './websocket/notification.service';
import { Observable } from 'rxjs';
import { AsyncPipe } from '@angular/common'; // Don't forget AsyncPipe

// ... (existing imports and component definition)

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, AsyncPipe], // Add AsyncPipe
  template: `
    <header>
      <!-- ... existing header content ... -->
      <div class="notification-status">
        <span [class.connected]="isConnected$ | async" [class.disconnected]="!(isConnected$ | async)">
          WebSocket Status: {{ (isConnected$ | async) ? 'Connected' : 'Disconnected' }}
        </span>
        @if (latestNotification$ | async; as notification) {
          <div [class]="'notification ' + notification.type">
            {{ notification.message }} ({{ notification.timestamp | date:'shortTime' }})
          </div>
        }
      </div>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
  `,
  styles: `
    /* ... existing styles ... */
    .notification-status {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 0.9em;
    }
    .connected { color: #28a745; font-weight: bold; }
    .disconnected { color: #dc3545; }
    .notification {
      padding: 8px 12px;
      border-radius: 5px;
      margin-left: 10px;
      color: white;
    }
    .notification.info { background-color: #007bff; }
    .notification.warn { background-color: #ffc107; color: #333; }
    .notification.error { background-color: #dc3545; }
  `,
})
export class AppComponent {
  // ... (existing properties like authService)

  notificationService = inject(NotificationService);
  isConnected$: Observable<boolean> = this.notificationService.connectionStatus$;
  latestNotification$: Observable<AppNotification> = this.notificationService.notifications$;

  constructor() {
    // ... (existing constructor logic)
    // You can subscribe here or use async pipe in template
    this.notificationService.notifications$.subscribe(notification => {
      console.log('Received notification:', notification);
    });
  }

  // ... (existing login/logout methods)
}

// server.js (run with `node server.js`)
const WebSocket = require('ws');
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('WebSocket server is running\n');
});

const wss = new WebSocket.Server({ server });

let notificationId = 0;

wss.on('connection', ws => {
  console.log('Client connected');

  // Send a welcome message
  ws.send(JSON.stringify({
    id: `notif-${notificationId++}`,
    message: 'Welcome to the real-time notification service!',
    timestamp: new Date().toISOString(),
    type: 'info'
  }));

  // Periodically send a new notification
  const interval = setInterval(() => {
    const messages = [
      'New data available!',
      'System update scheduled.',
      'Warning: High CPU usage!',
      'Error: Database connection lost!',
      'Your order has shipped!'
    ];
    const types = ['info', 'warn', 'error', 'info', 'info'];
    const randomIndex = Math.floor(Math.random() * messages.length);

    ws.send(JSON.stringify({
      id: `notif-${notificationId++}`,
      message: messages[randomIndex],
      timestamp: new Date().toISOString(),
      type: types[randomIndex]
    }));
  }, 5000); // Every 5 seconds

  ws.on('message', message => {
    console.log(`Received message from client: ${message}`);
    // Echo message back or process it
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
    clearInterval(interval);
  });

  ws.on('error', error => {
    console.error('WebSocket error:', error);
  });
});

server.listen(3000, () => {
  console.log('HTTP and WebSocket server listening on port 3000');
});

ng generate service feature-flag/feature-flag

// projects/shell/src/app/feature-flag/feature-flag.service.ts
import { Injectable, signal, effect } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { catchError, tap, shareReplay } from 'rxjs/operators';
import { environment } from '../../environments/environment'; // Assuming environment file

export interface FeatureFlags {
  [key: string]: boolean;
}

@Injectable({
  providedIn: 'root',
})
export class FeatureFlagService {
  private _flags = signal<FeatureFlags>({});
  public flags = this._flags.asReadonly();

  private _flagsLoaded = new BehaviorSubject<boolean>(false);
  public flagsLoaded$ = this._flagsLoaded.asObservable();

  constructor(private http: HttpClient) {
    // Load flags on service initialization
    this.loadFeatureFlags().subscribe();

    // Optional: Log flags when they change (for debugging)
    effect(() => {
      console.log('Current feature flags:', this.flags());
    });
  }

  /**
   * Loads feature flags from a backend API or local configuration.
   * In a real app, this might fetch from a dedicated feature flagging service.
   */
  private loadFeatureFlags(): Observable<FeatureFlags> {
    // In production, this would be an HTTP call to a backend endpoint
    // e.g., this.http.get<FeatureFlags>(environment.featureFlagApiUrl)
    // For this example, we'll simulate a fetch with an observable.
    return of({
      'new-dashboard-enabled': true,
      'beta-search-enabled': false,
      'admin-panel-v2': true,
      'experimental-checkout': false,
    }).pipe(
      tap((data) => {
        this._flags.set(data);
        this._flagsLoaded.next(true);
        console.log('Feature flags loaded successfully.');
      }),
      catchError((error) => {
        console.error('Failed to load feature flags, falling back to defaults:', error);
        // Fallback to default flags if API fails
        this._flags.set({
          'new-dashboard-enabled': false,
          'beta-search-enabled': false,
          'admin-panel-v2': false,
          'experimental-checkout': false,
        });
        this._flagsLoaded.next(true);
        return of(this._flags());
      }),
      shareReplay(1) // Ensure flags are loaded only once and shared with multiple subscribers
    );
  }

  /**
   * Checks if a specific feature is enabled.
   * @param flagName The name of the feature flag.
   * @returns True if the feature is enabled, false otherwise.
   */
  isFeatureEnabled(flagName: string): boolean {
    return this.flags()[flagName] === true;
  }

  /**
   * Refreshes feature flags from the source.
   */
  refreshFlags(): Observable<FeatureFlags> {
    this._flagsLoaded.next(false); // Indicate flags are being reloaded
    return this.loadFeatureFlags();
  }
}

// projects/shell/src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http'; // Import this

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient() // Provide HttpClient
  ]
};

// projects/shell/src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink } from '@angular/router';
import { NotificationService, AppNotification } from './websocket/notification.service';
import { FeatureFlagService } from './feature-flag/feature-flag.service'; // Import
import { Observable } from 'rxjs';
import { AsyncPipe } from '@angular/common';

// ... (existing imports)

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, AsyncPipe],
  template: `
    <header>
      <!-- ... existing header content ... -->
      <div class="feature-status">
        <button (click)="featureFlagService.refreshFlags()">Refresh Flags</button>
        @if (featureFlagService.isFeatureEnabled('new-dashboard-enabled')) {
          <span class="feature-on">New Dashboard Enabled!</span>
        } @else {
          <span class="feature-off">Old Dashboard Active.</span>
        }
      </div>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
  `,
  styles: `
    /* ... existing styles ... */
    .feature-status {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 0.9em;
    }
    .feature-on { color: #28a745; font-weight: bold; }
    .feature-off { color: #ffc107; font-weight: bold; }
    .feature-status button {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
    }
    .feature-status button:hover {
      background-color: #5a6268;
    }
  `,
})
export class AppComponent {
  // ... (existing properties)

  featureFlagService = inject(FeatureFlagService);

  // ... (existing constructor and methods)
}