@openrewrite/recipes-angular 0.0.0

package/src/migration/replace-testbed-get-with-inject.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, capture, pattern} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+export class ReplaceTestBedGetWithInject extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-testbed-get-with-inject";
+    readonly displayName: string = "Replace `TestBed.get()` with `TestBed.inject()`";
+    readonly description: string = "Replaces deprecated `TestBed.get()` calls with `TestBed.inject()`. " +
+        "`TestBed.get()` was deprecated in Angular 9 and removed in Angular 13.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+                if (!m) return m;
+
+                const args = capture<J>({variadic: true});
+                if (!await pattern`TestBed.get(${args})`.match(m, this.cursor)) return m;
+
+                return create(m, draft => {
+                    (draft.name as any).simpleName = 'inject';
+                }) as J.MethodInvocation;
+            }
+        }();
+    }
+}

package/src/migration/replace-untyped-forms.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {ChangeImport, JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {J, isIdentifier} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+const MODULE = '@angular/forms';
+
+const FORM_RENAMES: [string, string][] = [
+    ['FormControl', 'UntypedFormControl'],
+    ['FormGroup', 'UntypedFormGroup'],
+    ['FormArray', 'UntypedFormArray'],
+    ['FormBuilder', 'UntypedFormBuilder'],
+];
+
+class RenameFormIdentifiers extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-untyped-forms.rename-identifiers";
+    readonly displayName: string = "Rename form identifiers to untyped variants";
+    readonly description: string = "Renames form class identifiers in code usages.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const renameMap = new Map(FORM_RENAMES);
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitIdentifier(identifier: J.Identifier, p: ExecutionContext): Promise<J | undefined> {
+                let id = await super.visitIdentifier(identifier, p) as J.Identifier;
+                if (!id) return id;
+
+                const newName = renameMap.get(id.simpleName);
+                if (!newName) return id;
+
+                return create(id, draft => {
+                    draft.simpleName = newName;
+                }) as J.Identifier;
+            }
+        }();
+    }
+}
+
+export class ReplaceUntypedForms extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-untyped-forms";
+    readonly displayName: string = "Replace form classes with untyped variants";
+    readonly description: string = "Renames `FormControl`, `FormGroup`, `FormArray`, and `FormBuilder` to their " +
+        "`Untyped*` equivalents in imports and usages. Angular 14 introduced strictly typed forms, " +
+        "requiring existing untyped usages to migrate to the `Untyped*` aliases.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            ...FORM_RENAMES.map(([oldMember, newMember]) =>
+                new ChangeImport({oldModule: MODULE, oldMember, newModule: MODULE, newMember})
+            ),
+            new RenameFormIdentifiers(),
+        ];
+    }
+}

package/src/migration/replace-validator-with-validators.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J, isIdentifier} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+export class ReplaceValidatorWithValidators extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-validator-with-validators";
+    readonly displayName: string = "Replace `validator`/`asyncValidator` with plural forms";
+    readonly description: string = "Renames the deprecated singular `validator` and `asyncValidator` " +
+        "property names to `validators` and `asyncValidators` (plural). " +
+        "Angular 10 deprecated the singular forms in favor of `AbstractControlOptions`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const replacements = new Map([
+            ['validator', 'validators'],
+            ['asyncValidator', 'asyncValidators'],
+        ]);
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitPropertyAssignment(prop: JS.PropertyAssignment, p: ExecutionContext): Promise<J | undefined> {
+                let pa = await super.visitPropertyAssignment(prop, p) as JS.PropertyAssignment;
+                if (!pa) return pa;
+
+                const nameExpr = pa.name.element;
+                if (!isIdentifier(nameExpr)) return pa;
+
+                const replacement = replacements.get(nameExpr.simpleName);
+                if (!replacement) return pa;
+
+                return create(pa, draft => {
+                    (draft.name.element as any).simpleName = replacement;
+                }) as JS.PropertyAssignment;
+            }
+        }();
+    }
+}

package/src/migration/replace-view-encapsulation-native.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J, isIdentifier} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+export class ReplaceViewEncapsulationNative extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-view-encapsulation-native";
+    readonly displayName: string = "Replace `ViewEncapsulation.Native` with `ViewEncapsulation.ShadowDom`";
+    readonly description: string = "Replaces `ViewEncapsulation.Native` with `ViewEncapsulation.ShadowDom`. " +
+        "`ViewEncapsulation.Native` was deprecated in Angular 6 and removed in Angular 11.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitPropertyAssignment(prop: JS.PropertyAssignment, p: ExecutionContext): Promise<J | undefined> {
+                let pa = await super.visitPropertyAssignment(prop, p) as JS.PropertyAssignment;
+                if (!pa) return pa;
+
+                const nameExpr = pa.name.element;
+                if (!isIdentifier(nameExpr) || nameExpr.simpleName !== 'encapsulation') return pa;
+
+                if (!pa.initializer) return pa;
+
+                if (pa.initializer.kind === J.Kind.FieldAccess) {
+                    const fieldAccess = pa.initializer as J.FieldAccess;
+                    if (fieldAccess.target.kind !== J.Kind.Identifier) return pa;
+                    if ((fieldAccess.target as J.Identifier).simpleName !== 'ViewEncapsulation') return pa;
+                    if (fieldAccess.name.element.simpleName !== 'Native') return pa;
+
+                    return create(pa, draft => {
+                        const fa = (draft as any).initializer;
+                        fa.name = {
+                            ...fieldAccess.name,
+                            element: {
+                                ...fieldAccess.name.element,
+                                simpleName: 'ShadowDom'
+                            }
+                        };
+                    }) as JS.PropertyAssignment;
+                }
+
+                return pa;
+            }
+        }();
+    }
+}

package/src/migration/update-component-template-url.ts

@@ -0,0 +1,186 @@
+import {ExecutionContext, Option, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J, isIdentifier, isLiteral} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Updates the templateUrl property in Angular @Component decorators.
+ *
+ * This recipe is useful for:
+ * - Refactoring template file paths after directory restructuring
+ * - Standardizing template path conventions
+ * - Mass updating template references across components
+ *
+ * Example transformations:
+ * - `templateUrl: './old-path.html'` → `templateUrl: './new-path.html'`
+ * - `templateUrl: './component.html'` → `templateUrl: './templates/component.html'`
+ */
+export class UpdateComponentTemplateUrl extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.update-component-template-url";
+    readonly displayName: string = "Update component `templateUrl`";
+    readonly description: string = "Updates the `templateUrl` property value in Angular `@Component` decorators. Useful for refactoring template file paths or standardizing path conventions.";
+
+    @Option({
+        displayName: "Old template URL",
+        description: "The template URL to replace. Can be an exact path (e.g., `./old.html`) or a pattern.",
+        example: "./old-template.html"
+    })
+    oldTemplateUrl!: string;
+
+    @Option({
+        displayName: "New template URL",
+        description: "The new template URL to use.",
+        example: "./new-template.html"
+    })
+    newTemplateUrl!: string;
+
+    @Option({
+        displayName: "Use regex pattern",
+        description: "If `true`, treats `oldTemplateUrl` as a regex pattern and supports capture groups in `newTemplateUrl`. Default: `false`",
+        example: "true",
+        required: false
+    })
+    useRegex?: boolean;
+
+    constructor(options?: { oldTemplateUrl?: string; newTemplateUrl?: string; useRegex?: boolean }) {
+        super(options);
+        this.oldTemplateUrl ??= '';
+        this.newTemplateUrl ??= '';
+        this.useRegex ??= false;
+    }
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const oldTemplateUrl = this.oldTemplateUrl;
+        const newTemplateUrl = this.newTemplateUrl;
+        const useRegex = this.useRegex;
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitAnnotation(annotation: J.Annotation, p: ExecutionContext): Promise<J | undefined> {
+                let a = await super.visitAnnotation(annotation, p) as J.Annotation;
+
+                if (!a) {
+                    return a;
+                }
+
+                // Check if this is a @Component decorator
+                const annotType = a.annotationType;
+                let isComponentDecorator = false;
+
+                if (isIdentifier(annotType)) {
+                    isComponentDecorator = annotType.simpleName === 'Component';
+                }
+
+                if (!isComponentDecorator) {
+                    return a;
+                }
+
+                // Find the templateUrl property in the decorator arguments
+                if (!a.arguments || !a.arguments.elements || a.arguments.elements.length === 0) {
+                    return a;
+                }
+
+                const firstArg = a.arguments.elements[0].element;
+                if (firstArg.kind !== J.Kind.NewClass) {
+                    return a;
+                }
+
+                const newClass = firstArg as J.NewClass;
+                if (!newClass.body) {
+                    return a;
+                }
+
+                // Look for templateUrl property and check if it needs updating
+                let needsChange = false;
+                let updatedTemplateUrl: string | null = null;
+
+                for (const stmtPadded of newClass.body.statements) {
+                    const stmt = stmtPadded.element;
+
+                    if (stmt.kind === JS.Kind.PropertyAssignment) {
+                        const propAssignment = stmt as JS.PropertyAssignment;
+                        const nameExpr = propAssignment.name.element;
+
+                        if (isIdentifier(nameExpr) && nameExpr.simpleName === 'templateUrl') {
+                            const initializer = propAssignment.initializer;
+
+                            if (initializer && isLiteral(initializer) && typeof initializer.value === 'string') {
+                                const currentUrl = initializer.value as string;
+
+                                if (useRegex) {
+                                    // Use regex pattern matching
+                                    const pattern = new RegExp(oldTemplateUrl);
+                                    if (pattern.test(currentUrl)) {
+                                        updatedTemplateUrl = currentUrl.replace(pattern, newTemplateUrl);
+                                        if (updatedTemplateUrl !== currentUrl) {
+                                            needsChange = true;
+                                        }
+                                    }
+                                } else {
+                                    // Use exact string matching
+                                    if (currentUrl === oldTemplateUrl) {
+                                        updatedTemplateUrl = newTemplateUrl;
+                                        needsChange = true;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                if (!needsChange || !updatedTemplateUrl) {
+                    return a;
+                }
+
+                // Apply the transformation
+                const finalUpdatedUrl = updatedTemplateUrl;
+                const modifiedAnnotation = create(a, draft => {
+                    if (!draft.arguments || !draft.arguments.elements[0]) {
+                        return;
+                    }
+
+                    const firstArgDraft = draft.arguments.elements[0].element as J.NewClass;
+                    if (!firstArgDraft.body) {
+                        return;
+                    }
+
+                    // Find and update the templateUrl property
+                    for (let i = 0; i < firstArgDraft.body.statements.length; i++) {
+                        const stmt = firstArgDraft.body.statements[i].element;
+
+                        if (stmt.kind === JS.Kind.PropertyAssignment) {
+                            const propAssignment = stmt as JS.PropertyAssignment;
+                            const nameExpr = propAssignment.name.element;
+
+                            if (isIdentifier(nameExpr) && nameExpr.simpleName === 'templateUrl') {
+                                const initializer = propAssignment.initializer;
+
+                                if (initializer && isLiteral(initializer)) {
+                                    // Create a new literal with the updated URL
+                                    const newLiteral: J.Literal = {
+                                        ...initializer,
+                                        value: finalUpdatedUrl,
+                                        valueSource: `'${finalUpdatedUrl.replace(/'/g, "\\'")}'`
+                                    };
+
+                                    // Create new property assignment with updated literal
+                                    const newPropAssignment: JS.PropertyAssignment = {
+                                        ...propAssignment,
+                                        initializer: newLiteral
+                                    };
+
+                                    // Update the statement
+                                    firstArgDraft.body.statements[i] = {
+                                        ...firstArgDraft.body.statements[i],
+                                        element: newPropAssignment
+                                    };
+                                }
+                            }
+                        }
+                    }
+                }) as J.Annotation;
+
+                return modifiedAnnotation;
+            }
+        }();
+    }
+}

package/src/migration/update-tsconfig-module.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JsonVisitor, Json, getMemberKeyName, isObject, isLiteral} from "@openrewrite/rewrite/json";
+
+const OUTDATED_MODULES = ['commonjs', 'amd', 'umd', 'system', 'es2015', 'es6', 'none'];
+const OUTDATED_MODULE_RESOLUTIONS = ['classic'];
+
+export class UpdateTsconfigModule extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.update-tsconfig-module";
+    readonly displayName: string = "Update `tsconfig.json` module settings for Ivy";
+    readonly description: string = "Updates `compilerOptions.module` to `esnext` and `compilerOptions.moduleResolution` to `node` in `tsconfig.json`. " +
+        "Angular 9's Ivy compiler requires ES module format. Already-current values like `es2020`, `node16`, `nodenext`, or `bundler` are left unchanged.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JsonVisitor<ExecutionContext> {
+            protected async visitDocument(doc: Json.Document, p: ExecutionContext): Promise<Json | undefined> {
+                if (!doc.sourcePath.endsWith('tsconfig.json') &&
+                    !doc.sourcePath.endsWith('tsconfig.app.json') &&
+                    !doc.sourcePath.endsWith('tsconfig.lib.json')) {
+                    return doc;
+                }
+                return super.visitDocument(doc, p);
+            }
+
+            private inCompilerOptions = false;
+
+            protected async visitMember(member: Json.Member, p: ExecutionContext): Promise<Json | undefined> {
+                const m = await super.visitMember(member, p) as Json.Member;
+                if (!m) return m;
+
+                if (getMemberKeyName(m) === 'compilerOptions' && isObject(m.value)) {
+                    this.inCompilerOptions = true;
+                    const result = await super.visitMember(m, p) as Json.Member;
+                    this.inCompilerOptions = false;
+                    return result;
+                }
+
+                if (!this.inCompilerOptions || !isLiteral(m.value)) return m;
+
+                const keyName = getMemberKeyName(m);
+                const literal = m.value as Json.Literal;
+                const value = (literal.value as string).toLowerCase();
+
+                if (keyName === 'module' && OUTDATED_MODULES.includes(value)) {
+                    return {
+                        ...m,
+                        value: {
+                            ...literal,
+                            value: 'esnext',
+                            source: literal.source.replace(literal.value as string, 'esnext')
+                        } as Json.Literal
+                    } as Json.Member;
+                }
+
+                if (keyName === 'moduleResolution' && OUTDATED_MODULE_RESOLUTIONS.includes(value)) {
+                    return {
+                        ...m,
+                        value: {
+                            ...literal,
+                            value: 'node',
+                            source: literal.source.replace(literal.value as string, 'node')
+                        } as Json.Literal
+                    } as Json.Member;
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/migration/update-tsconfig-target.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JsonVisitor, Json, getMemberKeyName, isObject, isLiteral} from "@openrewrite/rewrite/json";
+
+const OUTDATED_TARGETS = ['es5', 'es2015', 'es2016', 'ES5', 'ES2015', 'ES2016'];
+
+export class UpdateTsconfigTarget extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.update-tsconfig-target";
+    readonly displayName: string = "Update `tsconfig.json` target to `es2017`";
+    readonly description: string = "Updates the `compilerOptions.target` in `tsconfig.json` from `es5`, `es2015`, or `es2016` to `es2017`. " +
+        "Angular 13 dropped IE11 support and requires at least ES2017.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JsonVisitor<ExecutionContext> {
+            protected async visitDocument(doc: Json.Document, p: ExecutionContext): Promise<Json | undefined> {
+                if (!doc.sourcePath.endsWith('tsconfig.json') &&
+                    !doc.sourcePath.endsWith('tsconfig.app.json') &&
+                    !doc.sourcePath.endsWith('tsconfig.lib.json')) {
+                    return doc;
+                }
+                return super.visitDocument(doc, p);
+            }
+
+            private inCompilerOptions = false;
+
+            protected async visitMember(member: Json.Member, p: ExecutionContext): Promise<Json | undefined> {
+                const m = await super.visitMember(member, p) as Json.Member;
+                if (!m) return m;
+
+                if (getMemberKeyName(m) === 'compilerOptions' && isObject(m.value)) {
+                    this.inCompilerOptions = true;
+                    const result = await super.visitMember(m, p) as Json.Member;
+                    this.inCompilerOptions = false;
+                    return result;
+                }
+
+                if (this.inCompilerOptions && getMemberKeyName(m) === 'target' && isLiteral(m.value)) {
+                    const literal = m.value as Json.Literal;
+                    const value = literal.value as string;
+                    if (OUTDATED_TARGETS.includes(value)) {
+                        return {
+                            ...m,
+                            value: {
+                                ...literal,
+                                value: 'es2017',
+                                source: literal.source.replace(value, 'es2017')
+                            } as Json.Literal
+                        } as Json.Member;
+                    }
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/migration/upgrade-to-angular-10.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {Recipe} from "@openrewrite/rewrite";
+import {UpgradeDependencyVersion} from "@openrewrite/rewrite/javascript";
+import {UpgradeToAngular9} from "./upgrade-to-angular-9";
+import {RemoveEs5BrowserSupport} from "./remove-es5-browser-support";
+import {FindBareModuleWithProviders} from "../search/find-bare-module-with-providers";
+import {ReplaceValidatorWithValidators} from "./replace-validator-with-validators";
+import {MigrateToSolutionStyleTsconfig} from "./migrate-to-solution-style-tsconfig";
+import {RenameFile} from "./rename-file";
+
+export class UpgradeToAngular10 extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeToAngular10";
+    readonly displayName = "Upgrade to Angular 10";
+    readonly description = "Migrates Angular 9.x applications to Angular 10. " +
+        "This includes removing the deprecated `es5BrowserSupport` option from `angular.json`, " +
+        "renaming deprecated `validator`/`asyncValidator` to their plural forms, " +
+        "renaming `browserslist` to `.browserslistrc`, " +
+        "migrating to solution-style `tsconfig.json`, " +
+        "and upgrading Angular, TypeScript, and related dependency versions.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToAngular9(),
+            // Code transformations
+            new RemoveEs5BrowserSupport(),
+            new ReplaceValidatorWithValidators(),
+            new MigrateToSolutionStyleTsconfig(),
+            // Search: deprecated APIs
+            new FindBareModuleWithProviders(),
+            // Rename browserslist → .browserslistrc
+            new RenameFile({fileMatcher: "**/browserslist", fileName: ".browserslistrc"}),
+            // Angular core packages
+            new UpgradeDependencyVersion({packageName: "@angular/*", newVersion: "10.x"}),
+            // Angular CDK
+            new UpgradeDependencyVersion({packageName: "@angular/cdk", newVersion: "10.x"}),
+            // Angular DevKit
+            new UpgradeDependencyVersion({packageName: "@angular-devkit/*", newVersion: "10.x"}),
+            new UpgradeDependencyVersion({packageName: "@schematics/angular", newVersion: "10.x"}),
+            // zone.js
+            new UpgradeDependencyVersion({packageName: "zone.js", newVersion: "0.10.x"}),
+            // TypeScript
+            new UpgradeDependencyVersion({packageName: "typescript", newVersion: "3.9.x"}),
+            // tslib
+            new UpgradeDependencyVersion({packageName: "tslib", newVersion: "2.x"}),
+        ];
+    }
+}

package/src/migration/upgrade-to-angular-11.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {Recipe} from "@openrewrite/rewrite";
+import {UpgradeDependencyVersion} from "@openrewrite/rewrite/javascript";
+import {UpgradeToAngular10} from "./upgrade-to-angular-10";
+import {ReplaceViewEncapsulationNative} from "./replace-view-encapsulation-native";
+import {RemoveExtractCss} from "./remove-extract-css";
+import {FindPreserveQueryParamsUsage} from "../search/find-preserve-query-params-usage";
+import {FindPreserveFragmentUsage} from "../search/find-preserve-fragment-usage";
+import {FindWrappedValueUsage} from "../search/find-wrapped-value-usage";
+import {ReplaceInitialNavigation} from "./replace-initial-navigation";
+
+export class UpgradeToAngular11 extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeToAngular11";
+    readonly displayName = "Upgrade to Angular 11";
+    readonly description = "Migrates Angular 10.x applications to Angular 11. " +
+        "This includes replacing `ViewEncapsulation.Native` with `ViewEncapsulation.ShadowDom`, " +
+        "removing the deprecated `extractCss` build option from `angular.json`, " +
+        "flagging deprecated string-based `loadChildren` and `preserveQueryParams` usage, " +
+        "and upgrading Angular, TypeScript, and related dependency versions.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToAngular10(),
+            // Code transformations
+            new ReplaceViewEncapsulationNative(),
+            new RemoveExtractCss(),
+            new ReplaceInitialNavigation(),
+            // Search: deprecated APIs
+            new FindPreserveQueryParamsUsage(),
+            new FindPreserveFragmentUsage(),
+            new FindWrappedValueUsage(),
+            // Angular core packages
+            new UpgradeDependencyVersion({packageName: "@angular/*", newVersion: "11.x"}),
+            // Angular CDK
+            new UpgradeDependencyVersion({packageName: "@angular/cdk", newVersion: "11.x"}),
+            // Angular DevKit
+            new UpgradeDependencyVersion({packageName: "@angular-devkit/*", newVersion: "11.x"}),
+            new UpgradeDependencyVersion({packageName: "@schematics/angular", newVersion: "11.x"}),
+            // zone.js
+            new UpgradeDependencyVersion({packageName: "zone.js", newVersion: "0.11.x"}),
+            // TypeScript
+            new UpgradeDependencyVersion({packageName: "typescript", newVersion: "4.0.x"}),
+            // tslib
+            new UpgradeDependencyVersion({packageName: "tslib", newVersion: "2.x"}),
+        ];
+    }
+}

package/src/migration/upgrade-to-angular-12.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {Recipe} from "@openrewrite/rewrite";
+import {UpgradeDependencyVersion} from "@openrewrite/rewrite/javascript";
+import {UpgradeToAngular11} from "./upgrade-to-angular-11";
+import {AddDefaultConfiguration} from "./add-default-configuration";
+import {ReplaceNodeSassWithSass} from "./replace-node-sass-with-sass";
+import {FindAsyncTestHelperUsage} from "../search/find-async-test-helper-usage";
+import {FindCompilerFactoryUsage} from "../search/find-compiler-factory-usage";
+
+export class UpgradeToAngular12 extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeToAngular12";
+    readonly displayName = "Upgrade to Angular 12";
+    readonly description = "Migrates Angular 11.x applications to Angular 12. " +
+        "This includes adding `defaultConfiguration: \"production\"` to build targets in `angular.json`, " +
+        "replacing `node-sass` with `sass` (Dart Sass), flagging deprecated `async` test helper and View Engine APIs, " +
+        "and upgrading Angular, TypeScript, and related dependency versions.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToAngular11(),
+            // Code transformations
+            new AddDefaultConfiguration(),
+            new ReplaceNodeSassWithSass(),
+            // Search: deprecated APIs
+            new FindAsyncTestHelperUsage(),
+            new FindCompilerFactoryUsage(),
+            // Angular core packages
+            new UpgradeDependencyVersion({packageName: "@angular/*", newVersion: "12.x"}),
+            // Angular DevKit
+            new UpgradeDependencyVersion({packageName: "@angular-devkit/*", newVersion: "12.x"}),
+            new UpgradeDependencyVersion({packageName: "@schematics/angular", newVersion: "12.x"}),
+            // zone.js
+            new UpgradeDependencyVersion({packageName: "zone.js", newVersion: "0.11.x"}),
+            // TypeScript
+            new UpgradeDependencyVersion({packageName: "typescript", newVersion: "4.2.x"}),
+        ];
+    }
+}