@openrewrite/recipes-angular 1.8.0 → 1.9.0-20260804-162757

package/src/migration/rename-angular-js-globals.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, produceAsync, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+const RENAMES: Record<string, string> = {
+    getAngularLib: 'getAngularJSGlobal',
+    setAngularLib: 'setAngularJSGlobal',
+};
+
+export class RenameAngularJsGlobals extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.rename-angular-js-globals";
+    readonly displayName: string = "Rename `getAngularLib`/`setAngularLib` to `getAngularJSGlobal`/`setAngularJSGlobal`";
+    readonly description: string = "Renames the `getAngularLib` and `setAngularLib` functions from `@angular/upgrade` to " +
+        "`getAngularJSGlobal` and `setAngularJSGlobal`. The deprecated aliases were removed in Angular 22.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitIdentifier(identifier: J.Identifier, p: ExecutionContext): Promise<J | undefined> {
+                const id = await super.visitIdentifier(identifier, p) as J.Identifier;
+                if (!id) return id;
+
+                const replacement = RENAMES[id.simpleName];
+                if (!replacement) return id;
+
+                return produceAsync(id, async draft => {
+                    draft.simpleName = replacement;
+                });
+            }
+        }();
+    }
+}

package/src/migration/rename-default-change-detection.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} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+export class RenameDefaultChangeDetection extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.rename-default-change-detection";
+    readonly displayName: string = "Rename `ChangeDetectionStrategy.Default` to `ChangeDetectionStrategy.Eager`";
+    readonly description: string = "Renames the deprecated `ChangeDetectionStrategy.Default` enum member to its Angular 22 " +
+        "replacement `ChangeDetectionStrategy.Eager`. Both members have the same value, so the change is behavior preserving.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitFieldAccess(fieldAccess: J.FieldAccess, p: ExecutionContext): Promise<J | undefined> {
+                const f = await super.visitFieldAccess(fieldAccess, p) as J.FieldAccess;
+                if (!f) return f;
+
+                if (!isIdentifier(f.target) || f.target.simpleName !== 'ChangeDetectionStrategy') return f;
+                if (f.name.element.simpleName !== 'Default') return f;
+
+                return {
+                    ...f,
+                    name: {...f.name, element: {...f.name.element, simpleName: 'Eager'}}
+                } as J.FieldAccess;
+            }
+        }();
+    }
+}

package/src/migration/replace-create-ng-module-ref.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, produceAsync, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, maybeAddImport, maybeRemoveImport} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+
+export class ReplaceCreateNgModuleRef extends Recipe {
+    readonly name = "org.openrewrite.angular.migration.replace-create-ng-module-ref";
+    readonly displayName: string = "Replace `createNgModuleRef` with `createNgModule`";
+    readonly description: string = "Renames `createNgModuleRef` to `createNgModule` in imports and usages. " +
+        "The deprecated `createNgModuleRef` alias was removed in Angular 22.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitIdentifier(identifier: J.Identifier, p: ExecutionContext): Promise<J | undefined> {
+                const id = await super.visitIdentifier(identifier, p) as J.Identifier;
+                if (!id || id.simpleName !== 'createNgModuleRef') return id;
+
+                maybeAddImport(this, {module: '@angular/core', member: 'createNgModule'});
+                maybeRemoveImport(this, '@angular/core', 'createNgModuleRef');
+
+                return produceAsync(id, async draft => {
+                    draft.simpleName = 'createNgModule';
+                });
+            }
+        }();
+    }
+}

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

@@ -0,0 +1,76 @@
+/*
+ * 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 {UpgradeToAngular21CodeChanges} from "./upgrade-to-angular-21";
+import {FindProvideRoutesUsage} from "../search/find-provide-routes-usage";
+import {FindCheckNoChangesUsage} from "../search/find-check-no-changes-usage";
+import {FindCanMatchUsage} from "../search/find-can-match-usage";
+import {FindHttpXhrBackendUsage} from "../search/find-http-xhr-backend-usage";
+import {FindImplicitParamsInheritance} from "../search/find-implicit-params-inheritance";
+import {AddEagerChangeDetection} from "./add-eager-change-detection";
+import {RenameDefaultChangeDetection} from "./rename-default-change-detection";
+import {AddNoIncrementalHydration} from "./add-no-incremental-hydration";
+import {AddStrictTemplatesFalse} from "./add-strict-templates-false";
+import {RemoveWithFetch} from "./remove-with-fetch";
+import {ReplaceCreateNgModuleRef} from "./replace-create-ng-module-ref";
+import {RenameAngularJsGlobals} from "./rename-angular-js-globals";
+
+export class UpgradeToAngular22CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeToAngular22CodeChanges";
+    readonly displayName = "Upgrade to Angular 22 (code changes)";
+    readonly description = "The source changes of the Angular 22 migration, without the dependency version bumps. " +
+        "Use `UpgradeToAngular22` unless you are composing a migration to a later major.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToAngular21CodeChanges(),
+            // Removed and behaviorally changed APIs that need human review
+            new FindProvideRoutesUsage(),
+            new FindCheckNoChangesUsage(),
+            new FindCanMatchUsage(),
+            new FindHttpXhrBackendUsage(),
+            new FindImplicitParamsInheritance(),
+            // Change detection defaults
+            new AddEagerChangeDetection(),
+            new RenameDefaultChangeDetection(),
+            // Hydration and template type checking defaults
+            new AddNoIncrementalHydration(),
+            new AddStrictTemplatesFalse(),
+            // Removed and deprecated APIs
+            new RemoveWithFetch(),
+            new ReplaceCreateNgModuleRef(),
+            new RenameAngularJsGlobals(),
+        ];
+    }
+}
+
+export class UpgradeToAngular22 extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeToAngular22";
+    readonly displayName = "Upgrade to Angular 22";
+    readonly description = "Migrates Angular 21.x applications to Angular 22. " +
+        "This includes running the Angular 21 migration first, making the pre-existing change detection, " +
+        "incremental hydration, and strict template defaults explicit, replacing APIs removed in Angular 22, " +
+        "flagging the router and `HttpClient` behavior changes for review, and upgrading TypeScript to 6.0.x.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToAngular22CodeChanges(),
+            // Angular core packages
+            await upgradeDependencyVersion({packagePattern: "@angular/*", newVersion: "22.x"}),
+            // Angular DevKit; `architect` and `build-webpack` kept the 0.<major><minor>.x CLI scheme
+            await upgradeDependencyVersion({packageName: "@angular-devkit/core", newVersion: "22.x"}),
+            await upgradeDependencyVersion({packagePattern: "@angular-devkit/s*", newVersion: "22.x"}),
+            await upgradeDependencyVersion({packageName: "@angular-devkit/build-angular", newVersion: "22.x"}),
+            await upgradeDependencyVersion({packagePattern: "@angular-devkit/architect*", newVersion: "0.2201.x"}),
+            await upgradeDependencyVersion({packageName: "@angular-devkit/build-webpack", newVersion: "0.2201.x"}),
+            await upgradeDependencyVersion({packageName: "@schematics/angular", newVersion: "22.x"}),
+            // TypeScript
+            await upgradeDependencyVersion({packageName: "typescript", newVersion: "6.0.x"}),
+        ];
+    }
+}

package/src/search/find-can-match-usage.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+const CAN_MATCH_TYPES = ['CanMatch', 'CanMatchFn'];
+
+export class FindCanMatchUsage extends Recipe {
+    readonly name = "org.openrewrite.angular.search.find-can-match-usage";
+    readonly displayName: string = "Find `CanMatch` guard usage";
+    readonly description: string = "Finds imports of `CanMatch` and `CanMatchFn` from `@angular/router`. " +
+        "In Angular 22 the `currentSnapshot` parameter became required, so class based guards must declare a third argument.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitImportDeclaration(jsImport: JS.Import, p: ExecutionContext): Promise<J | undefined> {
+                const imp = await super.visitImportDeclaration(jsImport, p) as JS.Import;
+                if (!imp.moduleSpecifier) return imp;
+
+                const moduleSpec = imp.moduleSpecifier.element;
+                if (moduleSpec.kind !== J.Kind.Literal) return imp;
+                if ((moduleSpec as J.Literal).value !== '@angular/router') return imp;
+
+                const namedBindings = imp.importClause?.namedBindings;
+                if (namedBindings?.kind === JS.Kind.NamedImports) {
+                    const named = namedBindings as JS.NamedImports;
+                    for (const specifier of named.elements.elements) {
+                        const spec = specifier.element as JS.ImportSpecifier;
+                        if (isIdentifier(spec.specifier) && CAN_MATCH_TYPES.includes(spec.specifier.simpleName)) {
+                            return foundSearchResult(imp,
+                                "The currentSnapshot parameter of CanMatchFn is required as of Angular 22; class implementations of CanMatch must declare the third argument.");
+                        }
+                    }
+                }
+
+                return imp;
+            }
+        };
+    }
+}

package/src/search/find-check-no-changes-usage.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+export class FindCheckNoChangesUsage extends Recipe {
+    readonly name = "org.openrewrite.angular.search.find-check-no-changes-usage";
+    readonly displayName: string = "Find `ChangeDetectorRef.checkNoChanges` usage";
+    readonly description: string = "Finds calls to `checkNoChanges()`, which was removed from `ChangeDetectorRef` in Angular 22. " +
+        "In tests, use `fixture.detectChanges()` instead.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+                if (!m || !m.select) return m;
+                if (!isIdentifier(m.name) || m.name.simpleName !== 'checkNoChanges') return m;
+
+                return foundSearchResult(m,
+                    "ChangeDetectorRef.checkNoChanges() was removed in Angular 22. Use fixture.detectChanges() in tests instead.");
+            }
+        };
+    }
+}

package/src/search/find-http-xhr-backend-usage.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+export class FindHttpXhrBackendUsage extends Recipe {
+    readonly name = "org.openrewrite.angular.search.find-http-xhr-backend-usage";
+    readonly displayName: string = "Find `HttpXhrBackend` usage";
+    readonly description: string = "Finds imports of `HttpXhrBackend` from `@angular/common/http`. " +
+        "Angular 22 uses the Fetch API by default; add `withXhr()` to `provideHttpClient()` to keep using `XMLHttpRequest`, " +
+        "which is also required for upload progress reports.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitImportDeclaration(jsImport: JS.Import, p: ExecutionContext): Promise<J | undefined> {
+                const imp = await super.visitImportDeclaration(jsImport, p) as JS.Import;
+                if (!imp.moduleSpecifier) return imp;
+
+                const moduleSpec = imp.moduleSpecifier.element;
+                if (moduleSpec.kind !== J.Kind.Literal) return imp;
+                if ((moduleSpec as J.Literal).value !== '@angular/common/http') return imp;
+
+                const namedBindings = imp.importClause?.namedBindings;
+                if (namedBindings?.kind === JS.Kind.NamedImports) {
+                    const named = namedBindings as JS.NamedImports;
+                    for (const specifier of named.elements.elements) {
+                        const spec = specifier.element as JS.ImportSpecifier;
+                        if (isIdentifier(spec.specifier) && spec.specifier.simpleName === 'HttpXhrBackend') {
+                            return foundSearchResult(imp,
+                                "HttpXhrBackend is no longer the default in Angular 22. Use provideHttpClient(withXhr()) to keep XMLHttpRequest based requests. See https://angular.dev/api/common/http/withXhr");
+                        }
+                    }
+                }
+
+                return imp;
+            }
+        };
+    }
+}

package/src/search/find-implicit-params-inheritance.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+export class FindImplicitParamsInheritance extends Recipe {
+    readonly name = "org.openrewrite.angular.search.find-implicit-params-inheritance";
+    readonly displayName: string = "Find router configuration relying on the default `paramsInheritanceStrategy`";
+    readonly description: string = "Finds `provideRouter()` and `RouterModule.forRoot()` calls that do not set `paramsInheritanceStrategy`. " +
+        "Angular 22 changed the default from `emptyOnly` to `always`, so route parameters and data are now inherited from all parent routes.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+                if (!m || !isIdentifier(m.name)) return m;
+
+                const isProvideRouter = !m.select && m.name.simpleName === 'provideRouter';
+                const isForRoot = m.name.simpleName === 'forRoot' &&
+                    !!m.select && isIdentifier(m.select.element) && m.select.element.simpleName === 'RouterModule';
+                if (!isProvideRouter && !isForRoot) return m;
+
+                if (await declaresParamsInheritanceStrategy(m, p)) return m;
+
+                return foundSearchResult(m,
+                    "paramsInheritanceStrategy defaults to 'always' as of Angular 22. Set it to 'emptyOnly' to keep the previous behavior.");
+            }
+        };
+    }
+}
+
+async function declaresParamsInheritanceStrategy(method: J.MethodInvocation, p: ExecutionContext): Promise<boolean> {
+    let found = false;
+    const detector = new class extends JavaScriptVisitor<ExecutionContext> {
+        override async visitIdentifier(identifier: J.Identifier, ctx: ExecutionContext): Promise<J | undefined> {
+            if (identifier.simpleName === 'paramsInheritanceStrategy') found = true;
+            return identifier;
+        }
+    }();
+    for (const element of method.arguments?.elements ?? []) {
+        await detector.visit(element.element, p);
+    }
+    return found;
+}

package/src/search/find-provide-routes-usage.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 {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+export class FindProvideRoutesUsage extends Recipe {
+    readonly name = "org.openrewrite.angular.search.find-provide-routes-usage";
+    readonly displayName: string = "Find `provideRoutes` usage";
+    readonly description: string = "Finds imports of `provideRoutes` from `@angular/router`, which was removed in Angular 22. " +
+        "Use `provideRouter()`, or provide the `ROUTES` multi token directly.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitImportDeclaration(jsImport: JS.Import, p: ExecutionContext): Promise<J | undefined> {
+                const imp = await super.visitImportDeclaration(jsImport, p) as JS.Import;
+                if (!imp.moduleSpecifier) return imp;
+
+                const moduleSpec = imp.moduleSpecifier.element;
+                if (moduleSpec.kind !== J.Kind.Literal) return imp;
+                if ((moduleSpec as J.Literal).value !== '@angular/router') return imp;
+
+                const namedBindings = imp.importClause?.namedBindings;
+                if (namedBindings?.kind === JS.Kind.NamedImports) {
+                    const named = namedBindings as JS.NamedImports;
+                    for (const specifier of named.elements.elements) {
+                        const spec = specifier.element as JS.ImportSpecifier;
+                        if (isIdentifier(spec.specifier) && spec.specifier.simpleName === 'provideRoutes') {
+                            return foundSearchResult(imp,
+                                "provideRoutes() was removed in Angular 22. Use provideRouter(), or the ROUTES multi token if necessary.");
+                        }
+                    }
+                }
+
+                return imp;
+            }
+        };
+    }
+}