or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

executors.mdgenerators.mdindex.mdmigrations.mdmodule-federation.mdtesting.mdutilities.md
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

To install, run

npx @tessl/cli 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;
}