0
# @nx/angular
1

2
@nx/angular is a comprehensive Angular plugin for Nx workspaces that provides executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It enables developers to create, build, test, and manage Angular projects with modern tooling integration including Jest, ESLint, Storybook, Cypress, Playwright, and Tailwind CSS.
3

4
## Package Information
5

6
- **Package Name**: @nx/angular
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @nx/angular`
10

11
## Core Imports
12

13
```typescript
14
import { generators, executors } from "@nx/angular";
15
```
16

17
For specific utilities:
18

19
```typescript
20
import { 
21
  addImportToModule, 
22
  addProviderToBootstrapApplication,
23
  createGlobPatternsForDependencies 
24
} from "@nx/angular/src/utils";
25
```
26

27
For generators:
28

29
```typescript
30
import { applicationGenerator, libraryGenerator } from "@nx/angular/generators";
31
```
32

33
## Basic Usage
34

35
```typescript
36
import { Tree } from "@nx/devkit";
37
import { applicationGenerator } from "@nx/angular/generators";
38

39
// Generate an Angular application
40
await applicationGenerator(tree, {
41
  name: "my-app",
42
  routing: true,
43
  style: "scss",
44
  standalone: true
45
});
46

47
// Use utility functions
48
import { addImportToModule } from "@nx/angular/src/utils";
49
addImportToModule(tree, "src/app/app.module.ts", "HttpClientModule");
50
```
51

52
## Architecture
53

54
@nx/angular is structured around several key components:
55

56
- **Executors**: Build, serve, and test Angular applications and libraries with optimized configurations
57
- **Generators**: Code scaffolding tools for creating applications, libraries, components, and other Angular constructs
58
- **Utilities**: Helper functions for AST manipulation, module management, and Angular-specific operations
59
- **Migrations**: Automated code transformations for updating Angular and Nx versions
60
- **Plugin System**: Nx workspace integration for automatic project configuration discovery
61

62
## Capabilities
63

64
### Application and Library Executors
65

66
Build, serve, and package Angular applications and libraries with support for modern bundlers and deployment targets.
67

68
```typescript { .api }
69
interface ApplicationExecutorOptions {
70
  buildTarget: string;
71
  outputPath: string;
72
  tsConfig: string;
73
  watch?: boolean;
74
}
75

76
interface PackageExecutorOptions {
77
  project: string;
78
  tsConfig: string;
79
  watch?: boolean;
80
  poll?: number;
81
}
82
```
83

84
[Executors](./executors.md)
85

86
### Code Generation
87

88
Comprehensive scaffolding system for Angular applications, libraries, components, and modern development patterns including Module Federation and NgRx.
89

90
```typescript { .api }
91
interface ApplicationGeneratorSchema {
92
  name: string;
93
  routing?: boolean;
94
  style?: 'css' | 'scss' | 'sass' | 'less';
95
  standalone?: boolean;
96
  directory?: string;
97
}
98

99
interface LibraryGeneratorSchema {
100
  name: string;
101
  buildable?: boolean;
102
  publishable?: boolean;
103
  directory?: string;
104
  importPath?: string;
105
}
106
```
107

108
[Generators](./generators.md)
109

110
### Angular Utilities
111

112
Helper functions for manipulating Angular code structures, adding imports, providers, and routes programmatically.
113

114
```typescript { .api }
115
function addImportToModule(
116
  tree: Tree, 
117
  modulePath: string, 
118
  importName: string
119
): void;
120

121
function addProviderToBootstrapApplication(
122
  tree: Tree,
123
  filePath: string,
124
  provider: string
125
): void;
126

127
function addRoute(
128
  tree: Tree,
129
  routesFile: string,
130
  route: string,
131
  lazy?: boolean
132
): void;
133
```
134

135
[Utilities](./utilities.md)
136

137
### Module Federation
138

139
Support for micro frontend architecture with Angular Module Federation, including host and remote application generation.
140

141
```typescript { .api }
142
interface HostGeneratorSchema {
143
  name: string;
144
  remotes?: string[];
145
  dynamic?: boolean;
146
}
147

148
interface RemoteGeneratorSchema {
149
  name: string;
150
  host?: string;
151
  port?: number;
152
}
153
```
154

155
[Module Federation](./module-federation.md)
156

157
### Testing and Development Tools
158

159
Integration with Cypress, Storybook, and other development tools for comprehensive testing and documentation workflows.
160

161
```typescript { .api }
162
interface StorybookConfigurationSchema {
163
  project: string;
164
  interactionTests?: boolean;
165
  generateStories?: boolean;
166
}
167

168
interface CypressComponentConfigurationSchema {
169
  project: string;
170
  buildTarget?: string;
171
  generateTests?: boolean;
172
}
173
```
174

175
[Testing](./testing.md)
176

177
### Migrations and Updates
178

179
Automated migration system for updating Angular versions, ESLint configurations, and build tool integrations.
180

181
```typescript { .api }
182
interface MigrationOptions {
183
  packageName: string;
184
  version: string;
185
  from: string;
186
  to: string;
187
}
188
```
189

190
[Migrations](./migrations.md)
191

192
## Types
193

194
```typescript { .api }
195
interface Tree {
196
  read(filePath: string): Buffer | null;
197
  write(filePath: string, content: Buffer | string): void;
198
  exists(filePath: string): boolean;
199
  delete(filePath: string): void;
200
  rename(from: string, to: string): void;
201
  children(dirPath: string): string[];
202
  isFile(filePath: string): boolean;
203
}
204

205
interface ExecutorContext {
206
  root: string;
207
  cwd: string;
208
  projectName?: string;
209
  targetName?: string;
210
  target?: Target;
211
  projectsConfigurations?: ProjectsConfigurations;
212
  nxJsonConfiguration?: NxJsonConfiguration;
213
}
214

215
interface GeneratorCallback {
216
  (): void | Promise<void>;
217
}
218

219
interface BuilderOutput {
220
  success: boolean;
221
  error?: string;
222
}
223
```