or run

tessl search
Log in

Version

Files

tile.json

tessl/npm-nx--angular

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@nx/angular@21.4.x

Agent Success

Agent success rate when using this tile

90%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.1x

Baseline

Agent success rate without this tile

82%

To install, run

tessl install tessl/npm-nx--angular@21.4.0

index.mddocs/

@nx/angular

@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.

Package Information

  • Package Name: @nx/angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @nx/angular

Core Imports

import { generators, executors } from "@nx/angular";

For specific utilities:

import { 
  addImportToModule, 
  addProviderToBootstrapApplication,
  createGlobPatternsForDependencies 
} from "@nx/angular/src/utils";

For generators:

import { applicationGenerator, libraryGenerator } from "@nx/angular/generators";

Basic Usage

import { Tree } from "@nx/devkit";
import { applicationGenerator } from "@nx/angular/generators";

// Generate an Angular application
await applicationGenerator(tree, {
  name: "my-app",
  routing: true,
  style: "scss",
  standalone: true
});

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

Architecture

@nx/angular is structured around several key components:

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

Capabilities

Application and Library Executors

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

interface ApplicationExecutorOptions {
  buildTarget: string;
  outputPath: string;
  tsConfig: string;
  watch?: boolean;
}

interface PackageExecutorOptions {
  project: string;
  tsConfig: string;
  watch?: boolean;
  poll?: number;
}

Executors

Code Generation

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

interface ApplicationGeneratorSchema {
  name: string;
  routing?: boolean;
  style?: 'css' | 'scss' | 'sass' | 'less';
  standalone?: boolean;
  directory?: string;
}

interface LibraryGeneratorSchema {
  name: string;
  buildable?: boolean;
  publishable?: boolean;
  directory?: string;
  importPath?: string;
}

Generators

Angular Utilities

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

function addImportToModule(
  tree: Tree, 
  modulePath: string, 
  importName: string
): void;

function addProviderToBootstrapApplication(
  tree: Tree,
  filePath: string,
  provider: string
): void;

function addRoute(
  tree: Tree,
  routesFile: string,
  route: string,
  lazy?: boolean
): void;

Utilities

Module Federation

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

interface HostGeneratorSchema {
  name: string;
  remotes?: string[];
  dynamic?: boolean;
}

interface RemoteGeneratorSchema {
  name: string;
  host?: string;
  port?: number;
}

Module Federation

Testing and Development Tools

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

interface StorybookConfigurationSchema {
  project: string;
  interactionTests?: boolean;
  generateStories?: boolean;
}

interface CypressComponentConfigurationSchema {
  project: string;
  buildTarget?: string;
  generateTests?: boolean;
}

Testing

Migrations and Updates

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

interface MigrationOptions {
  packageName: string;
  version: string;
  from: string;
  to: string;
}

Migrations

Types

interface Tree {
  read(filePath: string): Buffer | null;
  write(filePath: string, content: Buffer | string): void;
  exists(filePath: string): boolean;
  delete(filePath: string): void;
  rename(from: string, to: string): void;
  children(dirPath: string): string[];
  isFile(filePath: string): boolean;
}

interface ExecutorContext {
  root: string;
  cwd: string;
  projectName?: string;
  targetName?: string;
  target?: Target;
  projectsConfigurations?: ProjectsConfigurations;
  nxJsonConfiguration?: NxJsonConfiguration;
}

interface GeneratorCallback {
  (): void | Promise<void>;
}

interface BuilderOutput {
  success: boolean;
  error?: string;
}