How to share a TokenService from Angular Host app to Remote apps using Native Federation in...

I'm working on a micro-frontend project using Angular 20 and @angular-architects/native-federation (v20.1.2). I have a host app running on localhost:4200 and a remote app on localhost:3000.

I'm trying to share an authentication token (stored in a service called TokenService) from the host app with all remotes. However, I'm not sure how to pass the token to the remote apps dynamically during runtime.

Host App:

• 
  TokenService (in app/shared/token.service.ts)
  
  import { Injectable } from '@angular/core';
  
  @Injectable({
  providedIn: 'root'
  })
  export class Token {
  constructor() { }
  
  getToken() {
  return "Hello world"; // In real use, this would return a JWT or similar token
  }
  }
• 
  federation.manifest.json:
  
  {
  "mfe-remote": "http://localhost:3000/remoteEntry.json"
  }
  
  
  • federation.config.js:
  
  const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
  
  module.exports = withNativeFederation({
  name: 'mfe-host',
  exposes: {
  './TokenService': './src/app/shared/token.service.ts'
  }
  shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket' ],
  features: {
  ignoreUnusedDeps: true
  }
  });

Remote App:

• 
  federation.config.js:
  
  const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
  
  module.exports = withNativeFederation({
  name: 'mfe-remote',
  exposes: {
  './Component': './src/app/app.ts',
  },
  shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket' ],
  features: {
  ignoreUnusedDeps: true
  }
  });

My Goal: I want to access the TokenService defined in the host app from the remote app.

What I Tried:

• 
  I'm an absolute beginner with Native Federation and micro-frontends, so I'm still trying to understand the best practices.
  
  
• 
  Exposed TokenService in the exposes section of the host app’s federation.config.js, like this:
  
  exposes: {
  './TokenService': './src/app/shared/token.service.ts'
  }

Then tried importing it in the remote like so:

import { Token } from 'mfe-host/TokenService';



Can anybody guide me on this? I’m open to using a shared library/service approach, or any method that’s beginner-friendly and helps me pass the token from host to remotes reliably.

Angular version : 20.0.0
Native federation: "^20.1.2"

Any help or pointers (or example repo) would be much appreciated!

Continue reading...