Federation Session

Turn any standalone Angular app into a publicly accessible micro-frontend host — and let other Angular apps join it from anywhere, live.

@mikkel-ol/federation-session connects Angular Native Federation dev servers across machines through a YATSI tunnel. A host opens a session and gets a public Session URL. Anyone with that URL runs ng serve — and their app's root component appears on the host's screen, rebuilding and remounting live as they edit code.

No deployment, no shared network, no Docker, no config files to hand around. One schematic to adapt an app, one URL to join.

The host's session stage: each card is a remote Angular app running on someone else's machine, streamed in through the tunnel. The panel bottom-right shows the Session URL and lets the host manage remotes.

How it works

 Host machine                        YATSI server                 Remote machines
┌───────────────────────┐          ┌──────────────┐          ┌─────────────────────────┐
│ ng serve              │          │              │          │ ng serve --session-url …│
│  ├─ NF dev server     │◄─tunnel─►│  *.tunnel.   │◄─tunnel─►│  └─ NF dev server       │
│  └─ session gateway   │          │   your.dev   │          │                         │
│      └─ Session URL ──┼──────────►              ◄──────────┼── registers + publishes │
└───────────────────────┘          └──────────────┘          └─────────────────────────┘

1. The host runs ng serve. A local gateway wraps the Native Federation dev server, opens a tunnel, and prints a public Session URL with a join token.
2. A remote runs ng serve --session-url <url>. It registers with the session, receives its own short-lived tunnel grant from the host (remotes need no credentials of their own), and publishes its remoteEntry.json.
3. The host page polls session state and mounts each remote's exposed root component into a card on the session stage. When a remote rebuilds, the new revision is republished and remounted automatically — hot, cross-machine feedback while everyone stays on their own laptop.

Everything rides on ordinary dev servers. Stop ng serve and the session — tunnels, grants, registrations — is torn down with it.

Quick start

You need a running YATSI server and an API key for it (host only).

Host

Adapt a regular standalone Angular application:

npm install --save-dev @mikkel-ol/federation-session
ng generate @mikkel-ol/federation-session:setup \
  --project shell \
  --role host \
  --yatsi-server-url https://tunnel.example.com

Then serve it:

YATSI_API_KEY=... ng serve shell

  Federation session is live
  Send this URL to anyone joining the session:
  https://f3kq7v.tunnel.example.com?join=nX4tR8wKp2…

Send that URL to whoever should join.

Remote

Adapt any other standalone Angular application — on any machine:

npm install --save-dev @mikkel-ol/federation-session
ng generate @mikkel-ol/federation-session:setup --project my-app --role remote

Then join the session:

ng serve my-app --session-url "https://f3kq7v.tunnel.example.com?join=nX4tR8wKp2…"

That's it. my-app pops up on the host's stage, and every rebuild you make locally remounts there within moments.

What the setup generator does

The generator is designed to be plug-and-play for a regular Angular application — it adapts, it doesn't take over:

• If the project isn't a Native Federation project yet, it runs Native Federation's official init schematic for you (an existing Native Federation setup is left untouched).
• Your original serve target is preserved as serve-federation — plain local development keeps working exactly as before.
• serve becomes the session builder (:host or :remote), which delegates to serve-federation under the hood.
• Host: the root component's template is replaced with the session stage; your original markup is kept in an HTML comment right below it, so restoring the app is a copy-paste. CUSTOM_ELEMENTS_SCHEMA is added to the root component.
• Remote: the root component is exposed as ./Component in federation.config.mjs, and the dev server's allowedHosts is opened so the tunnel's Host header is accepted (the dev server still binds to localhost only).

Both classic angular.json workspaces and Nx project.json workspaces are supported.

The session stage

The host's page renders a <federation-session-stage> element — one card per remote with a live status pill (connected, reconnecting, last revision active, not ready). Rename it via the heading attribute:

<federation-session-stage heading="Design Review"></federation-session-stage>

The floating Session panel shows the Session URL with a copy button and, for the host, a Remove button per remote. Disable it with "panel": false on the host builder options.

Builder options

@mikkel-ol/federation-session:host

| Option | Default | Description | | --- | --- | --- | | target | — | The delegated dev-server target (set up as <project>:serve-federation) | | yatsiServerUrl | — | YATSI server URL, including http(s):// | | capacity | 24 | Maximum number of remotes in the session | | gatewayPort | 0 (random) | Local port for the session gateway | | open | false | Open the local session page in a browser on start | | panel | true | Show the floating session panel |

The host also requires the YATSI_API_KEY environment variable.

@mikkel-ol/federation-session:remote

| Option | Default | Description | | --- | --- | --- | | target | — | The delegated dev-server target | | remoteName | — | Lowercase kebab-case remote name (defaults to the project name at setup) | | sessionUrl | — | The Session URL from the host, join token included — usually passed as ng serve --session-url … |

Resilience

Sessions are built for flaky real-world dev machines:

• A remote whose tunnel drops re-requests a grant and reconnects with backoff for 30 seconds; the host shows reconnecting and keeps the last revision mounted (last revision active).
• Rebuilds are detected through Native Federation's build notifications and republished automatically.
• When the host stops or removes a remote, the remote's ng serve shuts down cleanly; when a remote leaves, its card disappears from the stage.

Security model

• The Session URL contains a random join token — treat it like a meeting link. Only the host's YATSI API key can mint tunnel grants; remotes get short-lived (60 s), per-remote, revocable grants scoped to the session.
• The host validates every published remoteEntry.json: it must be served through the session's own YATSI server, be valid JSON under 1 MB, match the registered remote name, and expose ./Component.
• Registration is rate-limited, and each remote authenticates follow-up calls with its own registration token.
• The gateway and dev servers bind to localhost; the tunnel is the only way in, and everything is revoked when the session ends.

Remote code is executed in the host's browser — invite people you trust, same as screen-sharing a branch.

Compatibility

| This package | Angular | Native Federation | | --- | --- | --- | | 22.x | 22 | 22 |

Requires standalone Angular applications (bootstrapApplication). Node ^20.19, ^22.12, or >=24.

License

MIT