FederationTools

FederationTools is a lightweight utility library designed to simplify environment variables, assets, and internationalization (i18n) management across Angular micro-frontend architectures (Module Federation / Native Federation).

It provides a single, consistent API that works across the shell and all remote MFEs, without iframes and without leaking configuration to window.

📦 Installation

Add the library to your workspace:

npm install @yaagoub/federation-tools

📁 Project Structure (Shell)

The shell application acts as the single source of truth for:

• environment variables
• translations
• asset origins

Recommended structure:

└── 📁settings
    ├── 📁env
    │   └── env.json                # Shell environment variables
    │
    ├── 📁i18n
    │   ├── en.json                 # English translations
    │   └── ar.json                 # Arabic translations
    │
    └── 📁manifest
        ├── 📁assets
        │   └── assets.manifest.json
        │       {
        │         "shell": "http://localhost:4200",
        │         "mfe1":  "http://localhost:4201",
        │         "mfe2":  "http://localhost:4202"
        │       }
        │
        ├── 📁env
        │   └── env.manifest.json
        │       {
        │         "shell": "http://localhost:4200",
        │         "mfe1":  "http://localhost:4201",
        │         "mfe2":  "http://localhost:4202"
        │       }
        │
        └── 📁i18n
            └── i18n.manifest.json
                {
                  "shell": "http://localhost:4200",
                  "mfe1":  "http://localhost:4201",
                  "mfe2":  "http://localhost:4202"
                }

for remotes Recommended structure:

└── 📁settings
    ├── 📁env
    │   └── env.json                # mfe environment variables
    │
    ├── 📁i18n
    │   ├── en.json                 # English translations
    │   └── ar.json                 # Arabic translations

Each manifest defines where to fetch data from for each micro frontend.

⚙️ Development Configuration (Angular)

During development, expose the manifests and settings using the Angular assets configuration:

"development": {
  "assets": [
    {
      "glob": "**/*",
      "input": "projects/lkhedma/public"
    },
    {
      "glob": "env.manifest.json",
      "input": "projects/../src/settings/manifest/env",
      "output": "."
    },
    {
      "glob": "assets.manifest.json",
      "input": "projects/../src/settings/manifest/assets",
      "output": "."
    },
    {
      "glob": "i18n.manifest.json",
      "input": "projects/../src/settings/manifest/i18n",
      "output": "."
    },
    {
      "glob": "**/*",
      "input": "projects/../src/settings/i18n",
      "output": "i18n"
    },
    {
      "glob": "env.json",
      "input": "projects/../src/settings/env",
      "output": "."
    }
  ],
  "optimization": false,
  "extractLicenses": false,
  "sourceMap": true
}

💡 In production, these files are typically served by the shell (CDN, Nginx, or gateway).

🔌 Shell Providers Setup

Register the FederationTools providers once in the shell application:

provideFederationAsset(),
provideFederationEnv(),
provideFederationTranslation('en') // default language

These providers automatically:

• load manifests
• fetch remote data
• cache results
• expose a unified API to all MFEs

🖼️ Federated Assets

Use assets from any MFE by prefixing the asset name with the micro frontend key.

<img [asset]="'mfe1:logo.png'" />

Supported elements

The asset directive works with:

• img
• video
• audio
• iframe
• source
• a
• object

The prefix (mfe1) must exist in assets.manifest.json.

🌍 Internationalization (i18n)

FederationTools provides a federated translation system shared across all MFEs.

Template usage

{{ 'home.title' | translate }}

Programmatic usage

import { inject } from '@angular/core';
import { TranslationService } from '@yaagoub/federation-tools';

const translationService = inject(TranslationService);

translationService.translate('home.title');

Translations are:

• loaded lazily
• merged across shell + MFEs
• automatically updated when the language changes

Waiting for environment initialization

import { from } from 'rxjs';
import { waitForFederationEnv } from '@yaagoub/federation-tools';

from(waitForFederationEnv('mfe1')).subscribe(env => {
  // Safe access to federated environment variables
});

Key guarantees

• ✔️ Shell loads the environment first
• ✔️ MFEs wait safely for availability
• ✔️ Immutable, frozen configuration
• ✔️ No global leaks