Unable to Get Ionic 7 Form to work with Angular Standalone Components

Question

I created an Ionic 7 app with tabs and picked the option to use standalone components. I then created a new page to be used for login, but cannot find the correct combination of imports to get it to work.

When I use components from '@ionic/angular/standalone' I get an error on page load saying "TypeError: Cannot redefine property: accept".

When I import IonicModule from "@ionic/angular" the page doesn't render correctly and I can't click in to the input fields.

test.page.ts with @ionic/angular/standalone

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { IonContent, IonHeader, IonTitle, IonCard, IonItem, IonInput, IonButton, IonToolbar} from '@ionic/angular/standalone';
import { Router } from '@angular/router';


@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
  standalone: true,
  imports: [IonContent, IonHeader, IonTitle, IonCard, IonItem, IonInput, IonButton, IonToolbar, CommonModule, FormsModule, ReactiveFormsModule]
})
export class TestPage implements OnInit {
 credentials!: FormGroup;

 constructor(
  private fb: FormBuilder,
  private router: Router
 ) {}

 ngOnInit() {
  this.credentials = this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   password: ['', [Validators.required]]
  });
 }

 async login() {
   this.router.navigateByUrl('/tabs', { replaceUrl: true });
 }

 // Easy access for form fields
 get email() {
  return this.credentials.get('email');
 }

 get password() {
  return this.credentials.get('password');
 }
}

test.page.ts with @ionic/angular

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { IonicModule} from '@ionic/angular';
import { Router } from '@angular/router';


@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule, ReactiveFormsModule]
})
export class TestPage implements OnInit {
 credentials!: FormGroup;

 constructor(
  private fb: FormBuilder,
  private router: Router
 ) {}

 ngOnInit() {
  this.credentials = this.fb.group({
   email: ['', [Validators.required, Validators.email]],
   password: ['', [Validators.required]]
  });
 }

 async login() {
   this.router.navigateByUrl('/tabs', { replaceUrl: true });
 }

 // Easy access for form fields
 get email() {
  return this.credentials.get('email');
 }

 get password() {
  return this.credentials.get('password');
 }
}

test.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Login</ion-title>
    </ion-toolbar>
  </ion-header>
   <form (ngSubmit)="login()" [formGroup]="credentials">
  <div class="input-group">
  <ion-card>
   <ion-item>
    <ion-input aria-label="Email" type="text" placeholder="Email" formControlName="email"></ion-input>
   </ion-item>
   <div *ngIf="(email?.dirty || email?.touched) && email?.errors" class="errors">
    <span *ngIf="email?.errors?.['required']">Email is required</span>
    <span *ngIf="email?.errors?.['email']">Email is invalid</span>
   </div>
   <ion-item>
    <ion-input type="password" placeholder="Password"></ion-input>
   </ion-item>
 </ion-card>
   <div *ngIf="(password?.dirty || password?.touched) && password?.errors" class="errors">
    <span *ngIf="password?.errors?.['required']">Password is required</span>
   </div>
  </div>

  <ion-button type="submit" expand="block" [disabled]="!credentials.valid">Log in</ion-button>
 </form>
</ion-content>