0
# Module Federation
1

2
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.
3

4
## Capabilities
5

6
### Host Application Generation
7

8
#### Host Generator
9

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

12
```typescript { .api }
13
/**
14
 * Generates a Module Federation host application
15
 * @param tree - Virtual file system tree
16
 * @param options - Host application configuration
17
 * @returns Promise resolving to callback function
18
 */
19
async function hostGenerator(
20
  tree: Tree,
21
  options: HostGeneratorSchema
22
): Promise<GeneratorCallback>;
23

24
interface HostGeneratorSchema {
25
  name: string;
26
  remotes?: string[];
27
  dynamic?: boolean;
28
  routing?: boolean;
29
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
30
  skipTests?: boolean;
31
  directory?: string;
32
  tags?: string;
33
  standalone?: boolean;
34
  port?: number;
35
  prefix?: string;
36
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
37
  inlineStyle?: boolean;
38
  inlineTemplate?: boolean;
39
  skipPackageJson?: boolean;
40
  unitTestRunner?: 'jest' | 'none';
41
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
42
  bundler?: 'webpack' | 'rspack';
43
  ssr?: boolean;
44
}
45
```
46

47
**Usage Example:**
48

49
```typescript
50
import { hostGenerator } from "@nx/angular/generators";
51

52
await hostGenerator(tree, {
53
  name: "shell-app",
54
  remotes: ["remote1", "remote2"],
55
  dynamic: true,
56
  routing: true,
57
  style: "scss",
58
  standalone: true,
59
  port: 4200
60
});
61
```
62

63
### Remote Application Generation
64

65
#### Remote Generator
66

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

69
```typescript { .api }
70
/**
71
 * Generates a Module Federation remote application
72
 * @param tree - Virtual file system tree
73
 * @param options - Remote application configuration
74
 * @returns Promise resolving to callback function
75
 */
76
async function remoteGenerator(
77
  tree: Tree,
78
  options: RemoteGeneratorSchema
79
): Promise<GeneratorCallback>;
80

81
interface RemoteGeneratorSchema {
82
  name: string;
83
  host?: string;
84
  port?: number;
85
  routing?: boolean;
86
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
87
  skipTests?: boolean;
88
  directory?: string;
89
  tags?: string;
90
  standalone?: boolean;
91
  prefix?: string;
92
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
93
  inlineStyle?: boolean;
94
  inlineTemplate?: boolean;
95
  skipPackageJson?: boolean;
96
  unitTestRunner?: 'jest' | 'none';
97
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
98
  bundler?: 'webpack' | 'rspack';
99
  ssr?: boolean;
100
}
101
```
102

103
**Usage Example:**
104

105
```typescript
106
import { remoteGenerator } from "@nx/angular/generators";
107

108
await remoteGenerator(tree, {
109
  name: "feature-remote",
110
  host: "shell-app",
111
  port: 4201,
112
  routing: true,
113
  style: "scss",
114
  standalone: true
115
});
116
```
117

118
### Module Federation Setup
119

120
#### Setup Module Federation Generator
121

122
Converts an existing Angular application to use Module Federation.
123

124
```typescript { .api }
125
/**
126
 * Sets up Module Federation for an existing Angular application
127
 * @param tree - Virtual file system tree
128
 * @param options - Module Federation setup configuration
129
 * @returns Promise resolving to callback function
130
 */
131
async function setupMfGenerator(
132
  tree: Tree,
133
  options: SetupMfSchema
134
): Promise<GeneratorCallback>;
135

136
interface SetupMfSchema {
137
  appName: string;
138
  mfType: 'host' | 'remote';
139
  routing?: boolean;
140
  host?: string;
141
  port?: number;
142
  remotes?: string[];
143
  dynamic?: boolean;
144
  skipFormat?: boolean;
145
  skipPackageJson?: boolean;
146
  standalone?: boolean;
147
  prefix?: string;
148
  federationType?: '@nx/webpack' | '@nx/rspack';
149
}
150
```
151

152
### Federated Module Generation
153

154
#### Federate Module Generator
155

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

158
```typescript { .api }
159
/**
160
 * Creates a federated module for a remote application
161
 * @param tree - Virtual file system tree
162
 * @param options - Federated module configuration
163
 * @returns Promise resolving to callback function
164
 */
165
async function federateModuleGenerator(
166
  tree: Tree,
167
  options: FederateModuleSchema
168
): Promise<GeneratorCallback>;
169

170
interface FederateModuleSchema {
171
  name: string;
172
  remote: string;
173
  path?: string;
174
  skipFormat?: boolean;
175
  exposeAs?: string;
176
  standalone?: boolean;
177
}
178
```
179

180
**Usage Example:**
181

182
```typescript
183
import { federateModuleGenerator } from "@nx/angular/generators";
184

185
await federateModuleGenerator(tree, {
186
  name: "user-profile",
187
  remote: "user-remote",
188
  exposeAs: "UserProfile",
189
  standalone: true
190
});
191
```
192

193
### Migration and Conversion
194

195
#### Convert to withModuleFederation
196

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

199
```typescript { .api }
200
/**
201
 * Converts to withModuleFederation helper
202
 * @param tree - Virtual file system tree
203
 * @param options - Conversion configuration
204
 * @returns Promise resolving to callback function
205
 */
206
async function convertToWithMfGenerator(
207
  tree: Tree,
208
  options: ConvertToWithMfSchema
209
): Promise<GeneratorCallback>;
210

211
interface ConvertToWithMfSchema {
212
  project: string;
213
  skipFormat?: boolean;
214
}
215
```
216

217
### Module Federation Helpers (Deprecated)
218

219
**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.
220

221
#### withModuleFederation (Deprecated)
222

223
```typescript { .api }
224
/**
225
 * @deprecated Use withModuleFederation from @nx/module-federation/angular instead
226
 * Module federation configuration helper for Angular applications
227
 * @param config - Module Federation configuration
228
 * @returns Webpack configuration with Module Federation setup
229
 */
230
function withModuleFederation(
231
  config: ModuleFederationConfig
232
): Promise<Configuration>;
233

234
interface ModuleFederationConfig {
235
  name: string;
236
  exposes?: Record<string, string>;
237
  remotes?: string[] | Record<string, string>;
238
  shared?: SharedLibraryConfig;
239
  additionalShared?: AdditionalSharedConfig;
240
  sharedMappings?: string[];
241
  tsConfig?: string;
242
}
243
```
244

245
#### withModuleFederationForSSR (Deprecated)
246

247
```typescript { .api }
248
/**
249
 * @deprecated Use withModuleFederationForSSR from @nx/module-federation/angular instead
250
 * Module federation configuration helper for Angular SSR applications
251
 * @param config - Module Federation SSR configuration
252
 * @returns Webpack configuration with Module Federation SSR setup
253
 */
254
function withModuleFederationForSSR(
255
  config: ModuleFederationConfig
256
): Promise<Configuration>;
257
```
258

259
### Development Server Configuration
260

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

263
**Host Development Server Configuration:**
264

265
```json
266
{
267
  "serve": {
268
    "executor": "@nx/angular:module-federation-dev-server",
269
    "options": {
270
      "buildTarget": "shell-app:build",
271
      "port": 4200
272
    },
273
    "configurations": {
274
      "production": {
275
        "buildTarget": "shell-app:build:production"
276
      }
277
    }
278
  }
279
}
280
```
281

282
**Remote Development Server Configuration:**
283

284
```json
285
{
286
  "serve": {
287
    "executor": "@nx/angular:module-federation-dev-server",
288
    "options": {
289
      "buildTarget": "feature-remote:build",
290
      "port": 4201
291
    }
292
  }
293
}
294
```
295

296
### SSR Module Federation
297

298
For Server-Side Rendering with Module Federation:
299

300
```json
301
{
302
  "serve-ssr": {
303
    "executor": "@nx/angular:module-federation-ssr-dev-server",
304
    "options": {
305
      "buildTarget": "shell-app:build",
306
      "port": 4200
307
    }
308
  }
309
}
310
```
311

312
## Types
313

314
```typescript { .api }
315
interface ModuleFederationConfig {
316
  name: string;
317
  exposes?: Record<string, string>;
318
  remotes?: string[] | Record<string, string>;
319
  shared?: SharedLibraryConfig;
320
  additionalShared?: AdditionalSharedConfig;
321
  sharedMappings?: string[];
322
  tsConfig?: string;
323
}
324

325
interface SharedLibraryConfig {
326
  [key: string]: {
327
    singleton?: boolean;
328
    strictVersion?: boolean;
329
    requiredVersion?: string;
330
    version?: string;
331
    eager?: boolean;
332
  };
333
}
334

335
interface AdditionalSharedConfig {
336
  getAliases?: () => Record<string, string>;
337
  getReplacements?: () => Record<string, string>;
338
}
339

340
interface Configuration {
341
  // Webpack configuration object
342
  [key: string]: any;
343
}
344

345
type MfType = 'host' | 'remote';
346
type FederationType = '@nx/webpack' | '@nx/rspack';
347
```