0
# Executors
1

2
Executors in @nx/angular provide build, serve, and package functionality for Angular applications and libraries with support for modern bundlers and deployment targets.
3

4
## Capabilities
5

6
### Application Executor
7

8
Builds an Angular application using esbuild with integrated SSR and prerendering capabilities.
9

10
```typescript { .api }
11
/**
12
 * Builds an Angular application using esbuild
13
 * @param options - Application executor options
14
 * @param context - Executor context
15
 * @returns Async iterable of build results
16
 */
17
async function* applicationExecutor(
18
  options: ApplicationExecutorOptions,
19
  context: ExecutorContext
20
): AsyncIterable<BuilderOutput>;
21

22
interface ApplicationExecutorOptions {
23
  buildTarget: string;
24
  outputPath: string;
25
  tsConfig: string;
26
  watch?: boolean;
27
  optimization?: boolean;
28
  aot?: boolean;
29
  sourceMap?: boolean;
30
  extractLicenses?: boolean;
31
  statsJson?: boolean;
32
  budgets?: Budget[];
33
  polyfills?: string | string[];
34
  assets?: AssetPattern[];
35
  styles?: StyleElement[];
36
  scripts?: ScriptElement[];
37
  prerender?: boolean;
38
  ssr?: boolean;
39
}
40
```
41

42
**Usage Example:**
43

44
```json
45
{
46
  "targets": {
47
    "build": {
48
      "executor": "@nx/angular:application",
49
      "options": {
50
        "outputPath": "dist/my-app",
51
        "tsConfig": "tsconfig.app.json",
52
        "polyfills": "src/polyfills.ts"
53
      }
54
    }
55
  }
56
}
57
```
58

59
### Browser ESBuild Executor
60

61
Builds an Angular application using esbuild for fast development builds.
62

63
```typescript { .api }
64
/**
65
 * Builds an Angular application using esbuild
66
 * @param options - ESBuild executor options
67
 * @param context - Executor context
68
 * @returns Async iterable of build results
69
 */
70
async function* esbuildExecutor(
71
  options: EsBuildSchema,
72
  context: ExecutorContext
73
): AsyncIterable<BuilderOutput>;
74

75
interface EsBuildSchema {
76
  main: string;
77
  polyfills?: string | string[];
78
  tsConfig: string;
79
  outputPath: string;
80
  index: string;
81
  assets?: AssetPattern[];
82
  styles?: StyleElement[];
83
  scripts?: ScriptElement[];
84
  sourceMap?: boolean;
85
  optimization?: boolean;
86
  watch?: boolean;
87
}
88
```
89

90
### Package Executor
91

92
Builds and packages an Angular library following the Angular Package Format (APF) for distribution as an NPM package.
93

94
```typescript { .api }
95
/**
96
 * Builds and packages an Angular library
97
 * @param options - Package executor options
98
 * @param context - Executor context
99
 * @returns Build result
100
 */
101
function packageExecutor(
102
  options: PackageExecutorOptions,
103
  context: ExecutorContext
104
): Promise<BuilderOutput>;
105

106
interface PackageExecutorOptions {
107
  project: string;
108
  tsConfig: string;
109
  watch?: boolean;
110
  poll?: number;
111
  deleteOutputPath?: boolean;
112
  buildableProjectDepsInPackageJsonType?: 'dependencies' | 'peerDependencies';
113
  updateBuildableProjectDepsInPackageJson?: boolean;
114
}
115
```
116

117
**Usage Example:**
118

119
```json
120
{
121
  "targets": {
122
    "build": {
123
      "executor": "@nx/angular:package",
124
      "options": {
125
        "project": "ng-package.json",
126
        "tsConfig": "tsconfig.lib.json"
127
      }
128
    }
129
  }
130
}
131
```
132

133
### NG Packagr Lite Executor
134

135
Builds an Angular library with support for incremental builds, producing only ESM2022 bundles.
136

137
```typescript { .api }
138
/**
139
 * Builds an Angular library with incremental build support
140
 * @param options - NG Packagr Lite executor options
141
 * @param context - Executor context
142
 * @returns Build result
143
 */
144
function ngPackagrLiteExecutor(
145
  options: NgPackagrLiteOptions,
146
  context: ExecutorContext
147
): Promise<BuilderOutput>;
148

149
interface NgPackagrLiteOptions {
150
  project: string;
151
  tsConfig: string;
152
  watch?: boolean;
153
}
154
```
155

156
### Delegate Build Executor
157

158
Delegates the build to a different target while supporting incremental builds.
159

160
```typescript { .api }
161
/**
162
 * Delegates build to another target with incremental build support
163
 * @param options - Delegate build executor options
164
 * @param context - Executor context
165
 * @returns Async iterable of build results
166
 */
167
async function* delegateBuildExecutor(
168
  options: DelegateBuildExecutorSchema,
169
  context: ExecutorContext
170
): AsyncIterable<BuilderOutput>;
171

172
interface DelegateBuildExecutorSchema {
173
  buildTarget: string;
174
  outputPath: string;
175
  tsConfig: string;
176
  watch?: boolean;
177
}
178
```
179

180
### Extract i18n Executor
181

182
Extracts i18n messages from Angular source code for internationalization.
183

184
```typescript { .api }
185
/**
186
 * Extracts i18n messages from source code
187
 * @param options - Extract i18n executor options
188
 * @param context - Executor context
189
 * @returns Async iterable of extraction results
190
 */
191
async function* extractI18nExecutor(
192
  options: ExtractI18nExecutorOptions,
193
  context: ExecutorContext
194
): AsyncIterable<BuilderOutput>;
195

196
interface ExtractI18nExecutorOptions {
197
  buildTarget: string;
198
  outputPath?: string;
199
  outFile?: string;
200
  format?: 'xmb' | 'xlf' | 'xlif' | 'xliff' | 'xlf2' | 'xliff2' | 'json';
201
  progress?: boolean;
202
}
203
```
204

205
### Development Server Executors
206

207
#### Module Federation Dev Server
208

209
Serves host Module Federation applications allowing specification of remote applications.
210

211
```typescript { .api }
212
/**
213
 * Serves Module Federation host applications
214
 * @param options - Module Federation dev server options
215
 * @param context - Executor context
216
 * @returns Async iterable of server results
217
 */
218
async function* moduleFederationDevServerExecutor(
219
  options: ModuleFederationDevServerOptions,
220
  context: ExecutorContext
221
): AsyncIterable<BuilderOutput>;
222

223
interface ModuleFederationDevServerOptions {
224
  buildTarget: string;
225
  port?: number;
226
  host?: string;
227
  ssl?: boolean;
228
  sslKey?: string;
229
  sslCert?: string;
230
  proxyConfig?: string;
231
  devRemotes?: string[];
232
  skipRemotes?: string[];
233
}
234
```
235

236
#### Module Federation SSR Dev Server
237

238
Reserved for host SSR Module Federation applications with remote application support.
239

240
```typescript { .api }
241
/**
242
 * Serves Module Federation SSR host applications
243
 * @param options - Module Federation SSR dev server options
244
 * @param context - Executor context
245
 * @returns Async iterable of server results
246
 */
247
async function* moduleFederationSsrDevServerExecutor(
248
  options: ModuleFederationSsrDevServerOptions,
249
  context: ExecutorContext
250
): AsyncIterable<BuilderOutput>;
251

252
interface ModuleFederationSsrDevServerOptions {
253
  buildTarget: string;
254
  port?: number;
255
  host?: string;
256
  ssl?: boolean;
257
  devRemotes?: string[];
258
  skipRemotes?: string[];
259
}
260
```
261

262
### Legacy Builders
263

264
#### Webpack Browser Builder
265

266
Builds an Angular application using webpack (legacy support).
267

268
```typescript { .api }
269
/**
270
 * Builds an Angular application using webpack
271
 * @param options - Webpack browser builder options
272
 * @param context - Builder context
273
 * @returns Build result
274
 */
275
function executeWebpackBrowserBuilder(
276
  options: WebpackBrowserBuilderOptions,
277
  context: BuilderContext
278
): Promise<BuilderOutput>;
279

280
interface WebpackBrowserBuilderOptions {
281
  main: string;
282
  polyfills?: string | string[];
283
  tsConfig: string;
284
  outputPath: string;
285
  index: string;
286
  assets?: AssetPattern[];
287
  styles?: StyleElement[];
288
  scripts?: ScriptElement[];
289
  sourceMap?: boolean;
290
  optimization?: boolean;
291
  aot?: boolean;
292
  extractLicenses?: boolean;
293
  buildOptimizer?: boolean;
294
  namedChunks?: boolean;
295
  outputHashing?: 'none' | 'all' | 'media' | 'bundles';
296
  budgets?: Budget[];
297
}
298
```
299

300
#### Dev Server Builder
301

302
Serves an Angular application using webpack or Vite based on the build target configuration.
303

304
```typescript { .api }
305
/**
306
 * Serves an Angular application
307
 * @param options - Dev server builder options
308
 * @param context - Builder context
309
 * @returns Server result
310
 */
311
function executeDevServerBuilder(
312
  options: DevServerBuilderOptions,
313
  context: BuilderContext
314
): Promise<BuilderOutput>;
315

316
interface DevServerBuilderOptions {
317
  buildTarget: string;
318
  port?: number;
319
  host?: string;
320
  proxyConfig?: string;
321
  ssl?: boolean;
322
  sslKey?: string;
323
  sslCert?: string;
324
  headers?: { [key: string]: string };
325
  open?: boolean;
326
  liveReload?: boolean;
327
  watch?: boolean;
328
  hmr?: boolean;
329
}
330
```
331

332
#### Webpack Server Builder
333

334
Builds a server Angular application using webpack for SSR scenarios.
335

336
```typescript { .api }
337
/**
338
 * Builds a server Angular application using webpack
339
 * @param options - Webpack server builder options
340
 * @param context - Builder context
341
 * @returns Build result
342
 */
343
function executeWebpackServerBuilder(
344
  options: WebpackServerBuilderOptions,
345
  context: BuilderContext
346
): Promise<BuilderOutput>;
347

348
interface WebpackServerBuilderOptions {
349
  main: string;
350
  tsConfig: string;
351
  outputPath: string;
352
  optimization?: boolean;
353
  sourceMap?: boolean;
354
  bundleDependencies?: boolean;
355
  externalDependencies?: 'none' | 'all' | string[];
356
}
357
```
358

359
## Types
360

361
```typescript { .api }
362
interface AssetPattern {
363
  glob: string;
364
  input: string;
365
  output: string;
366
  ignore?: string[];
367
}
368

369
interface StyleElement {
370
  input: string;
371
  bundleName?: string;
372
  inject?: boolean;
373
}
374

375
interface ScriptElement {
376
  input: string;
377
  bundleName?: string;
378
  inject?: boolean;
379
}
380

381
interface Budget {
382
  type: 'bundle' | 'initial' | 'allScript' | 'all' | 'anyComponentStyle' | 'any';
383
  name?: string;
384
  baseline?: string;
385
  maximumWarning?: string;
386
  maximumError?: string;
387
  minimumWarning?: string;
388
  minimumError?: string;
389
  warning?: string;
390
  error?: string;
391
}
392

393
interface BuilderContext {
394
  workspaceRoot: string;
395
  currentDirectory: string;
396
  target?: Target;
397
  logger: Logger;
398
}
399

400
interface Target {
401
  project: string;
402
  target: string;
403
  configuration?: string;
404
}
405
```