@openrewrite/recipes-angular 1.1.3 → 1.1.5

package/src/migration/explicit-standalone-flag.ts

@@ -35,18 +35,22 @@ export class ExplicitStandaloneFlag extends Recipe {
 
                 let standaloneIndex = -1;
                 let standaloneValue: boolean | null = null;
+                let hasImplicitStandaloneProp = false;
 
                 for (let i = 0; i < newClass.body.statements.length; i++) {
                     const stmt = newClass.body.statements[i].element;
                     if (stmt.kind === JS.Kind.PropertyAssignment) {
                         const prop = stmt as JS.PropertyAssignment;
                         const nameExpr = prop.name.element;
-                        if (isIdentifier(nameExpr) && nameExpr.simpleName === 'standalone') {
-                            standaloneIndex = i;
-                            if (prop.initializer && isLiteral(prop.initializer)) {
-                                standaloneValue = prop.initializer.value as boolean;
+                        if (isIdentifier(nameExpr)) {
+                            if (nameExpr.simpleName === 'standalone') {
+                                standaloneIndex = i;
+                                if (prop.initializer && isLiteral(prop.initializer)) {
+                                    standaloneValue = prop.initializer.value as boolean;
+                                }
+                            } else if (annotType.simpleName === 'Component' && nameExpr.simpleName === 'imports') {
+                                hasImplicitStandaloneProp = true;
                             }
-                            break;
                         }
                     }
                 }
@@ -59,6 +63,8 @@ export class ExplicitStandaloneFlag extends Recipe {
                 }
 
                 if (standaloneIndex === -1) {
+                    if (hasImplicitStandaloneProp) return a;
+
                     const existingStmts = newClass.body.statements;
                     if (existingStmts.length === 0) return a;
 

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

@@ -4,56 +4,128 @@
  * 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 {Cursor, ExecutionContext, produceAsync, Recipe, Tree, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} 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'],
-];
+const RENAMES: Record<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.";
+/**
+ * Renames `FormControl`, `FormGroup`, `FormArray`, and `FormBuilder` (from `@angular/forms`)
+ * to their `Untyped*` equivalents — both the named-import specifiers and every identifier
+ * usage in the file body.
+ *
+ * Skips any class used in a parameterized type position (`FormGroup<T>`): the typed form is
+ * intentional and `UntypedFormGroup<T>` is invalid (`UntypedFormGroup` is `FormGroup<any>`).
+ *
+ * Done in a single visitor (rather than four sequential `ChangeImport` calls) because chaining
+ * `ChangeImport` on the same import block can produce malformed output — stray commas, missing
+ * newlines — when each step rewrites the partially-modified previous output.
+ */
+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. Classes used in " +
+        "parameterized type positions (e.g. `FormGroup<T>`) are left unchanged because the user " +
+        "already opted into typed forms.";
 
     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;
+            private parameterized = new Set<string>();
+            private hasFormsImport = false;
+            private importedRenames = new Set<string>();
 
-                const newName = renameMap.get(id.simpleName);
-                if (!newName) return id;
+            override async visit<R extends J>(tree: Tree, p: ExecutionContext, parent?: Cursor): Promise<R | undefined> {
+                // Pass 1: collect classes used in parameterized type positions.
+                // visitIdentifier doesn't fire for type names (they go through visitTypeName,
+                // which is a no-op), so we walk explicitly via visitParameterizedType.
+                const parameterized = this.parameterized;
+                await new (class extends JavaScriptVisitor<ExecutionContext> {
+                    override async visitParameterizedType(pt: J.ParameterizedType, ctx: ExecutionContext): Promise<J | undefined> {
+                        if (isIdentifier(pt.class)) {
+                            const name = (pt.class as J.Identifier).simpleName;
+                            if (RENAMES[name]) parameterized.add(name);
+                        }
+                        return super.visitParameterizedType(pt, ctx);
+                    }
+                })().visit(tree, p, parent);
 
-                return create(id, draft => {
-                    draft.simpleName = newName;
-                }) as J.Identifier;
+                return super.visit<R>(tree, p, parent);
             }
-        }();
-    }
-}
 
-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(),
-        ];
+            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 !== MODULE) return imp;
+
+                const namedBindings = imp.importClause?.namedBindings;
+                if (namedBindings?.kind !== JS.Kind.NamedImports) return imp;
+
+                const named = namedBindings as JS.NamedImports;
+                let modified = false;
+                const newSpecifiers = named.elements.elements.map(specRP => {
+                    const spec = specRP.element as JS.ImportSpecifier;
+                    if (!isIdentifier(spec.specifier)) return specRP;
+                    const oldName = (spec.specifier as J.Identifier).simpleName;
+                    const newName = RENAMES[oldName];
+                    if (!newName) return specRP;
+                    // Skip rename when the class is used parameterized in this file.
+                    if (this.parameterized.has(oldName)) return specRP;
+
+                    this.hasFormsImport = true;
+                    this.importedRenames.add(oldName);
+                    modified = true;
+
+                    return {
+                        ...specRP,
+                        element: {
+                            ...spec,
+                            specifier: {
+                                ...spec.specifier,
+                                simpleName: newName,
+                            },
+                        },
+                    };
+                });
+
+                if (!modified) return imp;
+
+                return {
+                    ...imp,
+                    importClause: {
+                        ...imp.importClause!,
+                        namedBindings: {
+                            ...named,
+                            elements: {
+                                ...named.elements,
+                                elements: newSpecifiers,
+                            },
+                        },
+                    },
+                } as JS.Import;
+            }
+
+            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;
+                if (!this.hasFormsImport) return id;
+                if (!this.importedRenames.has(id.simpleName)) return id;
+                const newName = RENAMES[id.simpleName];
+                if (!newName) return id;
+                return produceAsync(id, async draft => { draft.simpleName = newName; });
+            }
+        };
     }
 }

package/src/migration/upgrade-angular-peer-libs-to-18.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 {Recipe} from "@openrewrite/rewrite";
+import {UpgradeDependencyVersion} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Bumps third-party Angular UI / utility libraries to versions compatible with Angular 18.
+ * These libraries follow their own version cadence — they're not in lockstep with Angular's
+ * major, so each entry needs its own target. Each `UpgradeDependencyVersion` is a no-op for
+ * projects that don't depend on the package, so the recipe is safe to include unconditionally.
+ *
+ * Add new entries when a customer's project surfaces another Angular-peer-pinned library that
+ * needs an explicit version pin for Angular 18 support.
+ */
+export class UpgradeAngularPeerLibsTo18 extends Recipe {
+    readonly name = "org.openrewrite.angular.UpgradeAngularPeerLibsTo18";
+    readonly displayName = "Upgrade known Angular peer libraries to versions compatible with Angular 18";
+    readonly description = "Bumps third-party Angular libraries (ng-bootstrap, ngx-bootstrap, …) " +
+        "to the version line compatible with Angular 18. Pair with `UpgradeToAngular18`.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            // ng-bootstrap's major lags Angular's by one — v17.x is the Angular-18 release.
+            new UpgradeDependencyVersion({packageName: "@ng-bootstrap/ng-bootstrap", newVersion: "17.x"}),
+            // ngx-bootstrap aligns with Angular's major — v18.x → Angular 18.
+            new UpgradeDependencyVersion({packageName: "ngx-bootstrap", newVersion: "18.x"}),
+        ];
+    }
+}

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

@@ -7,6 +7,7 @@
 import {Recipe} from "@openrewrite/rewrite";
 import {ChangeImport, UpgradeDependencyVersion} from "@openrewrite/rewrite/javascript";
 import {UpgradeToAngular17} from "./upgrade-to-angular-17";
+import {UpgradeAngularPeerLibsTo18} from "./upgrade-angular-peer-libs-to-18";
 import {ReplaceAsyncWithWaitForAsync} from "./replace-async-with-wait-for-async";
 import {ReplaceHttpClientModule} from "./replace-http-client-module";
 import {FindPlatformWorkerUsage} from "../search/find-platform-worker-usage";
@@ -54,15 +55,23 @@ export class UpgradeToAngular18 extends Recipe {
             new FindResourceCacheProviderUsage(),
             new FindTestabilityPendingRequestUsage(),
             new FindAnimationDriverMatchesElement(),
-            // Angular core packages
-            new UpgradeDependencyVersion({packagePattern: "@angular/*", newVersion: "18.x"}),
-            // Angular DevKit
-            new UpgradeDependencyVersion({packagePattern: "@angular-devkit/*", newVersion: "18.x"}),
-            new UpgradeDependencyVersion({packageName: "@schematics/angular", newVersion: "18.x"}),
+            // Bump every package whose target follows the Angular major (18.x) in a single
+            // atomic npm install. UpgradeDependencyVersion runs npm once per call, so packages
+            // that share a peer-dep graph MUST go in one matcher — otherwise a partial bump
+            // leaves the install failing with ERESOLVE. picomatch brace expansion lets us glob
+            // multiple package patterns in a single call.
+            new UpgradeDependencyVersion({
+                packagePattern: "{@angular/*,@angular-devkit/*,@schematics/angular}",
+                newVersion: "18.x",
+            }),
+            // Bump well-known third-party Angular libraries (ng-bootstrap, ngx-bootstrap, …) to
+            // their Angular-18-compatible versions. Kept as a separate recipe so it can be run
+            // independently or extended without touching this file every time.
+            new UpgradeAngularPeerLibsTo18(),
             // zone.js
             new UpgradeDependencyVersion({packageName: "zone.js", newVersion: "0.14.x"}),
-            // TypeScript
-            new UpgradeDependencyVersion({packageName: "typescript", newVersion: "5.5.x"}),
+            // TypeScript: Angular 18 compiler requires >=5.4.0 <5.5.0
+            new UpgradeDependencyVersion({packageName: "typescript", newVersion: "5.4.x"}),
         ];
     }
 }