CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nx--angular

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

90

1.09x
Overview
Eval results
Files

generators.mddocs/

Generators

Generators in @nx/angular provide comprehensive scaffolding for Angular applications, libraries, components, and modern development patterns including Module Federation and NgRx integration.

Capabilities

Application Generation

Application Generator

Creates a new Angular application with modern configuration options.

/**
 * Creates a new Angular application
 * @param tree - Virtual file system tree
 * @param schema - Application configuration options
 * @returns Promise resolving to callback function
 */
async function applicationGenerator(
  tree: Tree,
  schema: Partial<ApplicationGeneratorSchema>
): Promise<GeneratorCallback>;

interface ApplicationGeneratorSchema {
  name: string;
  routing?: boolean;
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
  skipTests?: boolean;
  directory?: string;
  tags?: string;
  standalone?: boolean;
  backendProject?: string;
  strict?: boolean;
  enableIvy?: boolean;
  bundler?: 'webpack' | 'esbuild';
  ssr?: boolean;
  prefix?: string;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  skipPackageJson?: boolean;
  unitTestRunner?: 'jest' | 'none';
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
}

Usage Example:

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

await applicationGenerator(tree, {
  name: "my-app",
  routing: true,
  style: "scss",
  standalone: true,
  ssr: false,
  unitTestRunner: "jest",
  e2eTestRunner: "cypress"
});

Library Generator

Creates a new Angular library with various configuration options.

/**
 * Creates a new Angular library
 * @param tree - Virtual file system tree
 * @param schema - Library configuration options
 * @returns Promise resolving to callback function
 */
async function libraryGenerator(
  tree: Tree,
  schema: LibraryGeneratorSchema
): Promise<GeneratorCallback>;

interface LibraryGeneratorSchema {
  name: string;
  directory?: string;
  publishable?: boolean;
  buildable?: boolean;
  importPath?: string;
  prefix?: string;
  skipModule?: boolean;
  tags?: string;
  unitTestRunner?: 'jest' | 'none';
  strict?: boolean;
  standaloneConfig?: boolean;
  compilationMode?: 'full' | 'partial';
  setParserOptionsProject?: boolean;
  addModuleSpec?: boolean;
  skipPackageJson?: boolean;
  skipTsConfig?: boolean;
  simpleName?: boolean;
}

Component Generation

Component Generator

Generates an Angular component with optional configuration.

/**
 * Generates an Angular component
 * @param tree - Virtual file system tree
 * @param rawOptions - Component configuration options
 * @returns Promise resolving to callback function
 */
async function componentGenerator(
  tree: Tree,
  rawOptions: ComponentGeneratorSchema
): Promise<GeneratorCallback>;

interface ComponentGeneratorSchema {
  name: string;
  project?: string;
  path?: string;
  prefix?: string;
  displayBlock?: boolean;
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  standalone?: boolean;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  changeDetection?: 'Default' | 'OnPush';
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
  skipTests?: boolean;
  selector?: string;
  skipImport?: boolean;
  flat?: boolean;
  skipSelector?: boolean;
  module?: string;
  export?: boolean;
}

Directive Generator

Generates an Angular directive.

/**
 * Generates an Angular directive
 * @param tree - Virtual file system tree
 * @param rawOptions - Directive configuration options
 * @returns Promise resolving to callback function
 */
async function directiveGenerator(
  tree: Tree,
  rawOptions: DirectiveGeneratorSchema
): Promise<GeneratorCallback>;

interface DirectiveGeneratorSchema {
  name: string;
  project?: string;
  path?: string;
  prefix?: string;
  standalone?: boolean;
  skipTests?: boolean;
  selector?: string;
  skipImport?: boolean;
  flat?: boolean;
  module?: string;
  export?: boolean;
}

Pipe Generator

Generates an Angular pipe.

/**
 * Generates an Angular pipe
 * @param tree - Virtual file system tree
 * @param rawOptions - Pipe configuration options
 * @returns Promise resolving to callback function
 */
async function pipeGenerator(
  tree: Tree,
  rawOptions: PipeGeneratorSchema
): Promise<GeneratorCallback>;

interface PipeGeneratorSchema {
  name: string;
  project?: string;
  path?: string;
  standalone?: boolean;
  skipTests?: boolean;
  skipImport?: boolean;
  flat?: boolean;
  module?: string;
  export?: boolean;
}

SCAM (Single Component Angular Module) Generators

SCAM Generator

Generates a component with an accompanying Single Component Angular Module.

/**
 * Generates a SCAM (Single Component Angular Module)
 * @param tree - Virtual file system tree
 * @param rawOptions - SCAM configuration options
 * @returns Promise resolving to callback function
 */
async function scamGenerator(
  tree: Tree,
  rawOptions: ScamGeneratorSchema
): Promise<GeneratorCallback>;

interface ScamGeneratorSchema {
  name: string;
  project?: string;
  path?: string;
  inlineScam?: boolean;
  prefix?: string;
  displayBlock?: boolean;
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  changeDetection?: 'Default' | 'OnPush';
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
  skipTests?: boolean;
  selector?: string;
  flat?: boolean;
  export?: boolean;
}

SCAM Directive Generator

Generates a directive with an accompanying Single Component Angular Module.

/**
 * Generates a directive with SCAM (Single Component Angular Module)
 * @param tree - Virtual file system tree
 * @param rawOptions - SCAM directive configuration options
 * @returns Promise resolving to callback function
 */
async function scamDirectiveGenerator(
  tree: Tree,
  rawOptions: ScamDirectiveGeneratorSchema
): Promise<GeneratorCallback>;

interface ScamDirectiveGeneratorSchema {
  path: string;
  name?: string;
  skipTests?: boolean;
  inlineScam?: boolean;
  selector?: string;
  prefix?: string;
  export?: boolean;
  type?: string;
  skipFormat?: boolean;
}

Usage Example:

import { scamDirectiveGenerator } from "@nx/angular/generators";

await scamDirectiveGenerator(tree, {
  path: "libs/ui-components/src/lib/highlight.directive.ts",
  selector: "appHighlight",
  export: true
});

SCAM Pipe Generator

Generates a pipe with an accompanying Single Component Angular Module.

/**
 * Generates a pipe with SCAM (Single Component Angular Module)
 * @param tree - Virtual file system tree
 * @param rawOptions - SCAM pipe configuration options
 * @returns Promise resolving to callback function
 */
async function scamPipeGenerator(
  tree: Tree,
  rawOptions: ScamPipeGeneratorSchema
): Promise<GeneratorCallback>;

interface ScamPipeGeneratorSchema {
  path: string;
  name?: string;
  skipTests?: boolean;
  inlineScam?: boolean;
  export?: boolean;
  typeSeparator?: '-' | '.';
  skipFormat?: boolean;
}

Usage Example:

import { scamPipeGenerator } from "@nx/angular/generators";

await scamPipeGenerator(tree, {
  path: "libs/ui-components/src/lib/currency-format.pipe.ts",
  export: true
});

SCAM to Standalone Converter

Converts an existing SCAM to a standalone component.

/**
 * Converts a SCAM to a standalone component
 * @param tree - Virtual file system tree
 * @param rawOptions - Conversion configuration options
 * @returns Promise resolving to callback function
 */
async function scamToStandaloneGenerator(
  tree: Tree,
  rawOptions: ScamToStandaloneSchema
): Promise<GeneratorCallback>;

interface ScamToStandaloneSchema {
  component: string;
  project?: string;
}

NgRx Integration

NgRx Root Store Generator

Adds NgRx root store configuration to an application.

/**
 * Adds NgRx root store to an application
 * @param tree - Virtual file system tree
 * @param options - NgRx root store configuration
 * @returns Promise resolving to callback function
 */
async function ngrxRootStoreGenerator(
  tree: Tree,
  options: NgrxRootStoreSchema
): Promise<GeneratorCallback>;

interface NgrxRootStoreSchema {
  project: string;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
  skipImport?: boolean;
  minimal?: boolean;
}

NgRx Feature Store Generator

Adds NgRx feature store to an application or library.

/**
 * Adds NgRx feature store to a project
 * @param tree - Virtual file system tree
 * @param options - NgRx feature store configuration
 * @returns Promise resolving to callback function
 */
async function ngrxFeatureStoreGenerator(
  tree: Tree,
  options: NgrxFeatureStoreSchema
): Promise<GeneratorCallback>;

interface NgrxFeatureStoreSchema {
  name: string;
  project: string;
  directory?: string;
  barrels?: boolean;
  facade?: boolean;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
  syntax?: 'creators' | 'classes';
  skipImport?: boolean;
}

Setup and Configuration Generators

Setup SSR Generator

Configures Angular Universal (SSR) for an Angular application.

/**
 * Sets up Angular Universal (SSR) for an application
 * @param tree - Virtual file system tree
 * @param options - SSR setup configuration
 * @returns Promise resolving to callback function
 */
async function setupSsrGenerator(
  tree: Tree,
  options: SetupSsrSchema
): Promise<GeneratorCallback>;

interface SetupSsrSchema {
  project: string;
  appId?: string;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
}

Setup Tailwind Generator

Configures Tailwind CSS for an application or library.

/**
 * Configures Tailwind CSS for a project
 * @param tree - Virtual file system tree
 * @param options - Tailwind setup configuration
 * @returns Promise resolving to callback function
 */
async function setupTailwindGenerator(
  tree: Tree,
  options: SetupTailwindSchema
): Promise<GeneratorCallback>;

interface SetupTailwindSchema {
  project: string;
  buildTarget?: string;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
}

Web Worker Generator

Creates a new Web Worker for an Angular application.

/**
 * Creates a Web Worker
 * @param tree - Virtual file system tree
 * @param options - Web Worker configuration
 * @returns Promise resolving to callback function
 */
async function webWorkerGenerator(
  tree: Tree,
  options: WebWorkerSchema
): Promise<GeneratorCallback>;

interface WebWorkerSchema {
  name: string;
  project: string;
  path?: string;
  target?: string;
  snippet?: boolean;
}

Library Secondary Entry Point Generator

Creates a secondary entry point for an Angular publishable library.

/**
 * Creates a secondary entry point for a library
 * @param tree - Virtual file system tree
 * @param options - Secondary entry point configuration
 * @returns Promise resolving to callback function
 */
async function librarySecondaryEntryPointGenerator(
  tree: Tree,
  options: LibrarySecondaryEntryPointSchema
): Promise<GeneratorCallback>;

interface LibrarySecondaryEntryPointSchema {
  name: string;
  library: string;
  skipModule?: boolean;
}

Conversion Generators

Convert to Application Executor

Converts projects to use the @nx/angular:application executor.

/**
 * Converts projects to use the application executor
 * @param tree - Virtual file system tree
 * @param options - Conversion configuration
 * @returns Promise resolving to callback function
 */
async function convertToApplicationExecutor(
  tree: Tree,
  options: ConvertToApplicationExecutorSchema
): Promise<GeneratorCallback>;

interface ConvertToApplicationExecutorSchema {
  project: string;
  skipFormat?: boolean;
}

Convert to Rspack

Converts Angular Webpack projects to use Rspack.

/**
 * Converts Angular projects to use Rspack
 * @param tree - Virtual file system tree
 * @param options - Rspack conversion configuration
 * @returns Promise resolving to callback function
 */
async function convertToRspack(
  tree: Tree,
  options: ConvertToRspackSchema
): Promise<GeneratorCallback>;

interface ConvertToRspackSchema {
  project: string;
  skipFormat?: boolean;
}

Internal and Setup Generators

Init Generator

Initializes the @nx/angular plugin in a workspace.

/**
 * Initializes the @nx/angular plugin
 * @param tree - Virtual file system tree
 * @param rawOptions - Initialization options
 * @returns Promise resolving to callback function
 */
async function initGenerator(
  tree: Tree,
  rawOptions: InitSchema
): Promise<GeneratorCallback>;

interface InitSchema {
  skipFormat?: boolean;
  skipPackageJson?: boolean;
  skipPostInstall?: boolean;
  unitTestRunner?: 'jest' | 'none';
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
}

Add Linting Generator

Adds linting configuration to an Angular project.

/**
 * Adds linting configuration to a project
 * @param tree - Virtual file system tree
 * @param options - Linting configuration options
 * @returns Promise resolving to callback function
 */
async function addLintingGenerator(
  tree: Tree,
  options: AddLintingSchema
): Promise<GeneratorCallback>;

interface AddLintingSchema {
  projectName: string;
  projectRoot: string;
  prefix: string;
  setParserOptionsProject?: boolean;
  skipFormat?: boolean;
}

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 GeneratorCallback {
  (): void | Promise<void>;
}

type UnitTestRunner = 'jest' | 'none';
type E2eTestRunner = 'cypress' | 'playwright' | 'none';
type Style = 'css' | 'scss' | 'sass' | 'less' | 'styl';
type ViewEncapsulation = 'Emulated' | 'Native' | 'None';
type ChangeDetection = 'Default' | 'OnPush';
type Bundler = 'webpack' | 'esbuild';

Install with Tessl CLI

npx tessl i tessl/npm-nx--angular

docs

executors.md

generators.md

index.md

migrations.md

module-federation.md

testing.md

utilities.md

tile.json