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

migrations.mddocs/

Migrations

Migration system in @nx/angular provides automated code transformations for updating Angular versions, ESLint configurations, build tool integrations, and other package dependencies across workspace projects.

Capabilities

Angular CLI Version Updates

Automated migrations for updating Angular CLI versions across major and minor releases.

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

interface AngularCliMigration extends MigrationOptions {
  packageName: '@angular/cli';
  targetVersion: string;
  skipFormat?: boolean;
}

Available Angular CLI Migrations:

  • update-angular-cli-version-16-1-0 - Updates to Angular CLI 16.1.0
  • update-angular-cli-version-16-2-0 - Updates to Angular CLI 16.2.0
  • update-angular-cli-version-17-0-0 - Updates to Angular CLI 17.0.0
  • update-angular-cli-version-17-1-0 - Updates to Angular CLI 17.1.0
  • update-angular-cli-version-17-2-0 - Updates to Angular CLI 17.2.0
  • update-angular-cli-version-17-3-0 - Updates to Angular CLI 17.3.0
  • update-angular-cli-version-18-0-0 - Updates to Angular CLI 18.0.0
  • update-angular-cli-version-18-1-0 - Updates to Angular CLI 18.1.0
  • update-angular-cli-version-18-2-0 - Updates to Angular CLI 18.2.0
  • update-angular-cli-version-19-0-0 - Updates to Angular CLI 19.0.0
  • update-angular-cli-version-19-1-0 - Updates to Angular CLI 19.1.0
  • update-angular-cli-version-19-2-0 - Updates to Angular CLI 19.2.0
  • update-angular-cli-version-19-3-0 - Updates to Angular CLI 19.3.0
  • update-angular-cli-version-20-0-0 - Updates to Angular CLI 20.0.0
  • update-angular-cli-version-21-0-0 - Updates to Angular CLI 21.0.0

ESLint and Angular ESLint Updates

Migrations for updating ESLint rules and Angular ESLint configurations.

interface ESLintMigrationOptions {
  skipFormat?: boolean;
  skipPackageJson?: boolean;
}

ESLint Migration Examples:

Rename Angular ESLint Accessibility Rules

/**
 * Removes 'accessibility-' prefix from Angular ESLint rules
 * Migrates rules like @angular-eslint/accessibility-click-events-have-key-events
 * to @angular-eslint/click-events-have-key-events
 */
interface RenameAccessibilityRulesMigration {
  name: 'rename-angular-eslint-accesibility-rules';
  description: 'Remove accessibility- prefix from Angular ESLint rules';
}

Add TypeScript ESLint Utils

/**
 * Installs @typescript-eslint/utils package for Angular ESLint v18+
 */
interface AddTypeScriptESLintUtilsMigration {
  name: 'add-typescript-eslint-utils';
  description: 'Install @typescript-eslint/utils package for Angular ESLint v18+';
}

Disable Angular ESLint Prefer Standalone

/**
 * Disables prefer-standalone rule for Angular 19+
 */
interface DisablePreferStandaloneMigration {
  name: 'disable-angular-eslint-prefer-standalone';
  description: 'Disable prefer-standalone rule for Angular 19+';
}

Module Federation Updates

Migrations for updating Module Federation configurations and imports.

interface ModuleFederationMigrationOptions {
  skipFormat?: boolean;
}

Module Federation Migration Examples:

Update Module Federation Config Import

/**
 * Updates ModuleFederationConfig import to use @nx/module-federation
 * Changes: import { ModuleFederationConfig } from '@nx/webpack'
 * To: import { ModuleFederationConfig } from '@nx/module-federation'
 */
interface UpdateMFConfigImportMigration {
  name: 'update-20-2-0-update-module-federation-config-import';
  description: 'Update ModuleFederationConfig import to use @nx/module-federation';
}

Update withModuleFederation Import

/**
 * Updates withModuleFederation import to use @nx/module-federation/angular
 * Changes: import { withModuleFederation } from '@nx/angular/mf'
 * To: import { withModuleFederation } from '@nx/module-federation/angular'
 */
interface UpdateWithMFImportMigration {
  name: 'update-20-2-0-update-with-module-federation-import';
  description: 'Update withModuleFederation import to use @nx/module-federation/angular';
}

Add Module Federation Environment Variable

/**
 * Adds NX_MF_DEV_SERVER_STATIC_REMOTES to target defaults
 */
interface AddMFEnvVarMigration {
  name: 'add-module-federation-env-var-to-target-defaults';
  description: 'Add NX_MF_DEV_SERVER_STATIC_REMOTES to target defaults';
}

Build and Development Server Updates

Migrations for updating build configurations and development servers.

interface BuildServerMigrationOptions {
  skipFormat?: boolean;
  targetDefaults?: boolean;
}

Build Server Migration Examples:

Rename Webpack Dev Server Executor

/**
 * Renames @nx/angular:webpack-dev-server to @nx/angular:dev-server
 */
interface RenameWebpackDevServerMigration {
  name: 'rename-webpack-dev-server-executor';
  description: 'Rename @nx/angular:webpack-dev-server to @nx/angular:dev-server';
}

Replace Angular Universal Builders

/**
 * Replaces @nguniversal/builders with @angular-devkit/build-angular
 */
interface ReplaceNguniversalBuildersMigration {
  name: 'replace-nguniversal-builders';
  description: 'Replace @nguniversal/builders with @angular-devkit/build-angular';
}

Replace Angular Universal Engines

/**
 * Replaces @nguniversal/ packages with @angular/ssr
 */
interface ReplaceNguniversalEnginesMigration {
  name: 'replace-nguniversal-engines';
  description: 'Replace @nguniversal/ packages with @angular/ssr';
}

Dependency and Configuration Updates

Migrations for managing project dependencies and build configurations.

interface DependencyMigrationOptions {
  skipFormat?: boolean;
  skipPackageJson?: boolean;
}

Dependency Migration Examples:

Add Browser Sync Dependency

/**
 * Adds browser-sync dev dependency for SSR dev server usage
 */
interface AddBrowserSyncDependencyMigration {
  name: 'add-browser-sync-dependency';
  description: 'Add browser-sync dev dependency for SSR dev server usage';
}

Add Autoprefixer Dependency

/**
 * Adds autoprefixer dev dependency for ng-packagr executors
 */
interface AddAutoprefixerDependencyMigration {
  name: 'add-autoprefixer-dependency';
  description: 'Add autoprefixer dev dependency for ng-packagr executors';
}

Set Update Buildable Deps

/**
 * Sets updateBuildableProjectDepsInPackageJson to true for buildable projects
 */
interface SetUpdateBuildableDependenciesMigration {
  name: 'explicitly-set-projects-to-update-buildable-deps';
  description: 'Set updateBuildableProjectDepsInPackageJson to true';
}

Update Zone.js Deep Import

/**
 * Replaces deep imports from zone.js with standard imports
 * Changes: import 'zone.js/dist/zone'
 * To: import 'zone.js'
 */
interface UpdateZoneJsImportMigration {
  name: 'update-zone-js-deep-import';
  description: 'Replace deep imports from zone.js with standard imports';
}

Migration Execution

Migrations are automatically executed when running nx migrate or when updating the @nx/angular package. They can also be run individually:

# Run all pending migrations
nx migrate --run-migrations

# Run a specific migration
nx migrate --run-migrations=migrations.json --only=update-angular-cli-version-19-0-0

Custom Migration Creation

For creating custom migrations, the migration system follows a specific pattern:

/**
 * Migration function interface
 * @param tree - Virtual file system tree
 * @param options - Migration-specific options
 * @returns Promise resolving to callback function or void
 */
interface MigrationFunction {
  (tree: Tree, options: any): Promise<GeneratorCallback | void> | GeneratorCallback | void;
}

interface MigrationDefinition {
  version: string;
  description?: string;
  implementation: string;
  factory?: string;
  schematic?: any;
}

interface MigrationsJson {
  generators?: Record<string, MigrationDefinition>;
  packageJsonUpdates?: Record<string, {
    version: string;
    packages?: Record<string, {
      version: string;
      ifPackageInstalled?: string;
    }>;
  }>;
}

Example Migration Implementation:

import { Tree, formatFiles } from '@nx/devkit';

export default async function updateSomething(tree: Tree) {
  // Find all Angular projects
  const projects = getProjects(tree);
  
  for (const [projectName, project] of projects) {
    if (project.projectType === 'application') {
      // Update project configuration
      updateProjectConfiguration(tree, projectName, {
        ...project,
        targets: {
          ...project.targets,
          build: {
            ...project.targets.build,
            executor: '@nx/angular:application'
          }
        }
      });
    }
  }
  
  await formatFiles(tree);
}

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>;
}

interface MigrationOptions {
  packageName: string;
  version: string;
  from: string;
  to: string;
  skipFormat?: boolean;
  skipPackageJson?: boolean;
}

interface MigrationFunction {
  (tree: Tree, options: any): Promise<GeneratorCallback | void> | GeneratorCallback | void;
}

interface MigrationDefinition {
  version: string;
  description?: string;
  implementation: string;
  factory?: string;
  schematic?: any;
}

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