module.exports = withNativeFederation({
  name: 'cart',

  exposes: {
    './routes': './cart/app.routes.ts',
  },
  ...
}

ng add @angular-architects/native-federation

npx nx g @nx/angular:application catalog --port=4201

npx nx g @nx/angular:application cart --port=4202

npx nx g @nx/angular:application checkout --port=4203

npx create-nx-workspace@latest angular-mfe
  --preset=angular-monorepo
  --appName=shell

{
  path: 'cart',
  loadChildren: () =>
    loadRemoteModule('cart', './CartModule')
      .then(m => m.CartModule)
}

exposes: {
  './routes': './apps/cart/src/app/app.routes.ts',
  './CartBadge': 
    './apps/cart/src/app/cart-badge.component.ts',
} ,
shared: {
  ...shareAll({ 
    singleton: true, 
    strictVersion: true,
    requiredVersion: 'auto', 
  }),
},

/catalog  →  loadRemoteModule → CatalogModule
/cart     →  loadRemoteModule → CartModule  
/checkout →  loadRemoteModule → CheckoutModule

Bad                        Good
/components remote    →    /checkout remote  (payments team)
/utils remote         →    /catalog remote   (catalog team)
/services remote      →    /cart remote      (cart team)

module.exports = {
  // ... rest of config
  shared: share({
    // 1. Angular Core: Must be a singleton and very strict
    "@angular/core": { 
      singleton: true, 
      strictVersion: true, 
      requiredVersion: 'auto' 
    },
    "@angular/common": { 
      singleton: true, 
      strictVersion: true, 
      requiredVersion: 'auto' 
    },
    // 2. Utility libs: Maybe you DON'T want a singleton (each app gets its own)
    "lodash": { 
      singleton: false,
      requiredVersion: '^4.17.0',
      strictVersion: false 
    },
    "ui-library": {
      singleton: true,
      strictVersion: false
    }
  })
};

@Injectable({ providedIn: 'root' })
export class CartStateService {
  private readonly _cartItems = signal<CartItem[]>([]);

  readonly cartItems = this._cartItems.asReadonly();

  readonly cartCount = computed(() =>
    this._cartItems()
     .reduce((total, item) => total + item.quantity, 0)
  );

  readonly cartTotal = computed(() => ...);

  addToCart(product: Product) { ... }

  removeFromCart(productId: number) { ... }

  clearCart() {...}
}

module.exports = {
  shared: share({
    ...
    "ui-library": {
      singleton: true,
      strictVersion: false
    },
  })
};

module.exports = withNativeFederation({
  name: 'cart',
  exposes: {
    './routes': './apps/cart/src/app/app.routes.ts',
    './CartBadge': './apps/cart/src/app/cart-badge.component.ts',
  },
  ...
}

loadRemoteModule('cart', './CartBadge')
  .then(m => this.cartBadge = m.CartBadgeComponent)
  .catch(() => console.warn('Cart badge unavailable'));

<ng-container *ngComponentOutlet="cartBadge" />