fix(migrations): fix NgClass leaving trailing comma after removal

Rishabhdeep Singh · Rishabhdeep Singh · commit 404d810d134d · 2026-03-15T20:25:51.000-07:00
This fixes an issue where when removing NgClass from the imports array of a component, an extra trailing comma would be left behind if it was the last element.
diff --git a/packages/core/schematics/ng-generate/ngclass-to-class-migration/util.ts b/packages/core/schematics/ng-generate/ngclass-to-class-migration/util.ts
@@ -178,14 +178,23 @@ function getPropertyRemovalRange(property: ts.ObjectLiteralElementLike): {
 
   const properties = parent.properties;
   const propertyIndex = properties.indexOf(property);
-  const end = property.getEnd();
 
-  if (propertyIndex < properties.length - 1) {
-    const nextProperty = properties[propertyIndex + 1];
-    return {start: property.getStart(), end: nextProperty.getStart()};
+  if (propertyIndex === 0) {
+    return {start: property.getFullStart(), end: properties[1].getFullStart()};
   }
 
-  return {start: property.getStart(), end};
+  if (properties.length === 1) {
+    const sourceFile = property.getSourceFile();
+    let end = property.getEnd();
+    const textAfter = sourceFile.text.substring(end, parent.getEnd());
+    const commaIndex = textAfter.indexOf(',');
+    if (commaIndex !== -1) {
+      end += commaIndex + 1;
+    }
+    return {start: property.getFullStart(), end};
+  }
+
+  return {start: properties[propertyIndex - 1].getEnd(), end: property.getEnd()};
 }
 
 export function calculateImportReplacements(
diff --git a/packages/core/schematics/test/ngclass_to_class_migration_spec.ts b/packages/core/schematics/test/ngclass_to_class_migration_spec.ts
@@ -519,6 +519,31 @@ describe('NgClass migration', () => {
       expect(content).not.toContain('imports: [NgFor, NgIf,]'); // No trailing comma
     });
 
+    it('should handle multiline imports array formatting with NgClass at the end', async () => {
+      writeFile(
+        '/app.component.ts',
+        `
+        import {Component} from '@angular/core';
+        import {NgClass} from '@angular/common';
+
+        @Component({
+        template: \`<div [ngClass]="{'admin': isAdmin}"></div>\`,
+        imports: [NgClass],
+        })
+        export class Cmp {}
+      `,
+      );
+
+      await runMigration();
+
+      const content = tree.readContent('/app.component.ts');
+
+      expect(content).toContain(`@Component({
+        template: \`<div [class.admin]="isAdmin"></div>\`,
+        })
+        export class Cmp {}`);
+    });
+
     it('should handle multiline imports array formatting', async () => {
       writeFile(
         '/app.component.ts',
