Comprehensive Angular plugin for Nx workspaces providing executors, generators, and utilities for managing Angular applications and libraries.
90
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.
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.0update-angular-cli-version-16-2-0 - Updates to Angular CLI 16.2.0update-angular-cli-version-17-0-0 - Updates to Angular CLI 17.0.0update-angular-cli-version-17-1-0 - Updates to Angular CLI 17.1.0update-angular-cli-version-17-2-0 - Updates to Angular CLI 17.2.0update-angular-cli-version-17-3-0 - Updates to Angular CLI 17.3.0update-angular-cli-version-18-0-0 - Updates to Angular CLI 18.0.0update-angular-cli-version-18-1-0 - Updates to Angular CLI 18.1.0update-angular-cli-version-18-2-0 - Updates to Angular CLI 18.2.0update-angular-cli-version-19-0-0 - Updates to Angular CLI 19.0.0update-angular-cli-version-19-1-0 - Updates to Angular CLI 19.1.0update-angular-cli-version-19-2-0 - Updates to Angular CLI 19.2.0update-angular-cli-version-19-3-0 - Updates to Angular CLI 19.3.0update-angular-cli-version-20-0-0 - Updates to Angular CLI 20.0.0update-angular-cli-version-21-0-0 - Updates to Angular CLI 21.0.0Migrations for updating ESLint rules and Angular ESLint configurations.
interface ESLintMigrationOptions {
skipFormat?: boolean;
skipPackageJson?: boolean;
}ESLint Migration Examples:
/**
* 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';
}/**
* 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+';
}/**
* Disables prefer-standalone rule for Angular 19+
*/
interface DisablePreferStandaloneMigration {
name: 'disable-angular-eslint-prefer-standalone';
description: 'Disable prefer-standalone rule for Angular 19+';
}Migrations for updating Module Federation configurations and imports.
interface ModuleFederationMigrationOptions {
skipFormat?: boolean;
}Module Federation Migration Examples:
/**
* 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';
}/**
* 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';
}/**
* 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';
}Migrations for updating build configurations and development servers.
interface BuildServerMigrationOptions {
skipFormat?: boolean;
targetDefaults?: boolean;
}Build Server Migration Examples:
/**
* 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';
}/**
* Replaces @nguniversal/builders with @angular-devkit/build-angular
*/
interface ReplaceNguniversalBuildersMigration {
name: 'replace-nguniversal-builders';
description: 'Replace @nguniversal/builders with @angular-devkit/build-angular';
}/**
* Replaces @nguniversal/ packages with @angular/ssr
*/
interface ReplaceNguniversalEnginesMigration {
name: 'replace-nguniversal-engines';
description: 'Replace @nguniversal/ packages with @angular/ssr';
}Migrations for managing project dependencies and build configurations.
interface DependencyMigrationOptions {
skipFormat?: boolean;
skipPackageJson?: boolean;
}Dependency Migration Examples:
/**
* 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';
}/**
* Adds autoprefixer dev dependency for ng-packagr executors
*/
interface AddAutoprefixerDependencyMigration {
name: 'add-autoprefixer-dependency';
description: 'Add autoprefixer dev dependency for ng-packagr executors';
}/**
* Sets updateBuildableProjectDepsInPackageJson to true for buildable projects
*/
interface SetUpdateBuildableDependenciesMigration {
name: 'explicitly-set-projects-to-update-buildable-deps';
description: 'Set updateBuildableProjectDepsInPackageJson to true';
}/**
* 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';
}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-0For 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);
}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--angularevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10