fix(migrations): prevent trailing comma syntax errors after removing NgStyle

aparzi · mattrbeck · commit 730684b9ce83 · 2026-03-17T18:01:25.000-06:00
This fixes an issue where when removing NgStyle from the imports array of a component, an extra trailing comma would be left behind if it was the last element in that component`.
diff --git a/packages/core/schematics/ng-generate/ngstyle-to-style-migration/util.ts b/packages/core/schematics/ng-generate/ngstyle-to-style-migration/util.ts
@@ -164,14 +164,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 (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};
+  }
+
+  if (propertyIndex === 0) {
+    return {start: property.getFullStart(), end: properties[1].getFullStart()};
   }
 
-  return {start: property.getStart(), end};
+  return {start: properties[propertyIndex - 1].getEnd(), end: property.getEnd()};
 }
 
 export function calculateImportReplacements(
diff --git a/packages/core/schematics/test/ngstyle_to_style_migration_spec.ts b/packages/core/schematics/test/ngstyle_to_style_migration_spec.ts
@@ -384,6 +384,31 @@ describe('NgStyle migration', () => {
         export class Cmp {}`);
     });
 
+    it('should handle multiline imports array formatting with NgStyle at the end', async () => {
+      writeFile(
+        '/app.component.ts',
+        `
+        import {Component} from '@angular/core';
+        import {NgStyle} from '@angular/common';
+
+        @Component({
+        template: \`<div [ngStyle]="{'background': 'red'}"></div>\`,
+        imports: [NgStyle],
+        })
+        export class Cmp {}
+      `,
+      );
+
+      await runMigration();
+
+      const content = tree.readContent('/app.component.ts');
+
+      expect(content).toContain(`@Component({
+        template: \`<div [style.background]="'red'"></div>\`,
+        })
+        export class Cmp {}`);
+    });
+
     it('should migrate when NgStyle is provided by CommonModule', async () => {
       writeFile(
         '/app.component.ts',
