Merge pull request #15 from ionic-team/sp/updates

fix: remove duplicate imports when migrating standalone components

Author: sean-perkins

apps/angular/ionic-angular-modules/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
-    "@ionic/angular": "^7.0.0",
+    "@ionic/angular": "^7.5.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

apps/angular/ionic-angular-standalone/package.json

@@ -26,7 +26,7 @@
     "@capacitor/haptics": "5.0.6",
     "@capacitor/keyboard": "5.0.6",
     "@capacitor/status-bar": "5.0.6",
-    "@ionic/angular": "^7.0.0",
+    "@ionic/angular": "^7.5.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>view-child</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">view-child</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-view-child',
+  templateUrl: './view-child.page.html',
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule],
+})
+export class ViewChildPage implements OnInit {
+  /**
+   * Referencing the template's ion-content results in a double call.
+   */
+  @ViewChild(IonContent)
+  content!: IonContent;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts

@@ -167,6 +167,49 @@ describe("migrateComponents", () => {
       );
     });
 
+    it("should remove duplicate imports from existing declarations", async () => {
+      const project = new Project({ useInMemoryFileSystem: true });
+
+      const component = `
+        import { Component, ViewChild } from "@angular/core";
+        import { IonContent, IonicModule } from "@ionic/angular";
+
+        @Component({
+          selector: 'my-component',
+          template: '<ion-content></ion-content>',
+          standalone: true,
+          imports: [IonicModule]
+        }) 
+        export class MyComponent {
+          @ViewChild(IonContent) content!: IonContent;
+        }
+      `;
+
+      const componentSourceFile = project.createSourceFile(
+        "foo.component.ts",
+        dedent(component),
+      );
+
+      await migrateComponents(project, { dryRun: false });
+
+      expect(dedent(componentSourceFile.getText())).toBe(
+        dedent(`
+        import { Component, ViewChild } from "@angular/core";
+        import { IonContent } from "@ionic/angular/standalone";
+
+        @Component({
+            selector: 'my-component',
+            template: '<ion-content></ion-content>',
+            standalone: true,
+            imports: [IonContent]
+        })
+        export class MyComponent {
+            @ViewChild(IonContent) content!: IonContent;
+        }
+      `),
+      );
+    });
+
     describe("hyperlinks", () => {
       it("should detect and import routerLink used in the template", async () => {
         const project = new Project({ useInMemoryFileSystem: true });

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts

@@ -154,6 +154,12 @@ async function migrateAngularComponentClass(
         componentClassName,
         "@ionic/angular/standalone",
       );
+      /**
+       * This removes the import from the class, if it is present.
+       * An example where it may exist is when the developer has
+       * a @ViewChild decorator that references an ionic component.
+       */
+      removeImportFromClass(sourceFile, componentClassName, "@ionic/angular");
     } else if (ngModuleSourceFile) {
       const componentClassName = kebabCaseToPascalCase(ionicComponent);