Blog Docs Log in Get started

tessl/npm-nx--angular

Comprehensive Angular plugin for Nx workspaces providing executors, generators, and utilities for managing Angular applications and libraries.

90

1.09x

Module Federation

Module Federation support in @nx/angular enables micro frontend architecture with Angular applications, allowing for the creation of host and remote applications that can dynamically load and share code at runtime.

Capabilities

Host Application Generation

Host Generator

Creates a Module Federation host application that can consume remote applications.

/**
 * Generates a Module Federation host application
 * @param tree - Virtual file system tree
 * @param options - Host application configuration
 * @returns Promise resolving to callback function
 */
async function hostGenerator(
  tree: Tree,
  options: HostGeneratorSchema
): Promise<GeneratorCallback>;

interface HostGeneratorSchema {
  name: string;
  remotes?: string[];
  dynamic?: boolean;
  routing?: boolean;
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
  skipTests?: boolean;
  directory?: string;
  tags?: string;
  standalone?: boolean;
  port?: number;
  prefix?: string;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  skipPackageJson?: boolean;
  unitTestRunner?: 'jest' | 'none';
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
  bundler?: 'webpack' | 'rspack';
  ssr?: boolean;
}

Usage Example:

import { hostGenerator } from "@nx/angular/generators";

await hostGenerator(tree, {
  name: "shell-app",
  remotes: ["remote1", "remote2"],
  dynamic: true,
  routing: true,
  style: "scss",
  standalone: true,
  port: 4200
});

Remote Application Generation

Remote Generator

Creates a Module Federation remote application that can be consumed by host applications.

/**
 * Generates a Module Federation remote application
 * @param tree - Virtual file system tree
 * @param options - Remote application configuration
 * @returns Promise resolving to callback function
 */
async function remoteGenerator(
  tree: Tree,
  options: RemoteGeneratorSchema
): Promise<GeneratorCallback>;

interface RemoteGeneratorSchema {
  name: string;
  host?: string;
  port?: number;
  routing?: boolean;
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
  skipTests?: boolean;
  directory?: string;
  tags?: string;
  standalone?: boolean;
  prefix?: string;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  skipPackageJson?: boolean;
  unitTestRunner?: 'jest' | 'none';
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
  bundler?: 'webpack' | 'rspack';
  ssr?: boolean;
}

Usage Example:

import { remoteGenerator } from "@nx/angular/generators";

await remoteGenerator(tree, {
  name: "feature-remote",
  host: "shell-app",
  port: 4201,
  routing: true,
  style: "scss",
  standalone: true
});

Module Federation Setup

Setup Module Federation Generator

Converts an existing Angular application to use Module Federation.

/**
 * Sets up Module Federation for an existing Angular application
 * @param tree - Virtual file system tree
 * @param options - Module Federation setup configuration
 * @returns Promise resolving to callback function
 */
async function setupMfGenerator(
  tree: Tree,
  options: SetupMfSchema
): Promise<GeneratorCallback>;

interface SetupMfSchema {
  appName: string;
  mfType: 'host' | 'remote';
  routing?: boolean;
  host?: string;
  port?: number;
  remotes?: string[];
  dynamic?: boolean;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
  standalone?: boolean;
  prefix?: string;
  federationType?: '@nx/webpack' | '@nx/rspack';
}

Federated Module Generation

Federate Module Generator

Creates a federated module that can be exposed by a remote application.

/**
 * Creates a federated module for a remote application
 * @param tree - Virtual file system tree
 * @param options - Federated module configuration
 * @returns Promise resolving to callback function
 */
async function federateModuleGenerator(
  tree: Tree,
  options: FederateModuleSchema
): Promise<GeneratorCallback>;

interface FederateModuleSchema {
  name: string;
  remote: string;
  path?: string;
  skipFormat?: boolean;
  exposeAs?: string;
  standalone?: boolean;
}

Usage Example:

import { federateModuleGenerator } from "@nx/angular/generators";

await federateModuleGenerator(tree, {
  name: "user-profile",
  remote: "user-remote",
  exposeAs: "UserProfile",
  standalone: true
});

Migration and Conversion

Convert to withModuleFederation

Converts old Module Federation configurations to use the new withModuleFederation helper.

/**
 * Converts to withModuleFederation helper
 * @param tree - Virtual file system tree
 * @param options - Conversion configuration
 * @returns Promise resolving to callback function
 */
async function convertToWithMfGenerator(
  tree: Tree,
  options: ConvertToWithMfSchema
): Promise<GeneratorCallback>;

interface ConvertToWithMfSchema {
  project: string;
  skipFormat?: boolean;
}

Module Federation Helpers (Deprecated)

Note: These functions are deprecated and have been moved to @nx/module-federation/angular. They are maintained for backward compatibility but should not be used in new projects.

withModuleFederation (Deprecated)

/**
 * @deprecated Use withModuleFederation from @nx/module-federation/angular instead
 * Module federation configuration helper for Angular applications
 * @param config - Module Federation configuration
 * @returns Webpack configuration with Module Federation setup
 */
function withModuleFederation(
  config: ModuleFederationConfig
): Promise<Configuration>;

interface ModuleFederationConfig {
  name: string;
  exposes?: Record<string, string>;
  remotes?: string[] | Record<string, string>;
  shared?: SharedLibraryConfig;
  additionalShared?: AdditionalSharedConfig;
  sharedMappings?: string[];
  tsConfig?: string;
}

withModuleFederationForSSR (Deprecated)

/**
 * @deprecated Use withModuleFederationForSSR from @nx/module-federation/angular instead
 * Module federation configuration helper for Angular SSR applications
 * @param config - Module Federation SSR configuration
 * @returns Webpack configuration with Module Federation SSR setup
 */
function withModuleFederationForSSR(
  config: ModuleFederationConfig
): Promise<Configuration>;

Development Server Configuration

Module Federation applications require special development server configurations provided by the executors.

Host Development Server Configuration:

{
  "serve": {
    "executor": "@nx/angular:module-federation-dev-server",
    "options": {
      "buildTarget": "shell-app:build",
      "port": 4200
    },
    "configurations": {
      "production": {
        "buildTarget": "shell-app:build:production"
      }
    }
  }
}

Remote Development Server Configuration:

{
  "serve": {
    "executor": "@nx/angular:module-federation-dev-server",
    "options": {
      "buildTarget": "feature-remote:build",
      "port": 4201
    }
  }
}

SSR Module Federation

For Server-Side Rendering with Module Federation:

{
  "serve-ssr": {
    "executor": "@nx/angular:module-federation-ssr-dev-server",
    "options": {
      "buildTarget": "shell-app:build",
      "port": 4200
    }
  }
}

Types

interface ModuleFederationConfig {
  name: string;
  exposes?: Record<string, string>;
  remotes?: string[] | Record<string, string>;
  shared?: SharedLibraryConfig;
  additionalShared?: AdditionalSharedConfig;
  sharedMappings?: string[];
  tsConfig?: string;
}

interface SharedLibraryConfig {
  [key: string]: {
    singleton?: boolean;
    strictVersion?: boolean;
    requiredVersion?: string;
    version?: string;
    eager?: boolean;
  };
}

interface AdditionalSharedConfig {
  getAliases?: () => Record<string, string>;
  getReplacements?: () => Record<string, string>;
}

interface Configuration {
  // Webpack configuration object
  [key: string]: any;
}

type MfType = 'host' | 'remote';
type FederationType = '@nx/webpack' | '@nx/rspack';

Install with Tessl CLI

npx tessl i tessl/npm-nx--angular