I’m migrating my Ionic v7 Angular v17 to Ionic v8 and Angular v18. I’ve chosen to continue to use NgModules.

When I load some routes (which lazy load modules) I’m getting an error on the first bound property of a component in the template:

app.module.ts:78 
Error: NG01203: No value accessor for form control unspecified name attribute. Find more at https://angular.dev/errors/NG01203
    at _throwMissingValueAccessorError (forms.mjs:3213:11)
    at setUpControl (forms.mjs:2986:13)
    at NgModel._setUpStandalone (forms.mjs:4088:9)
    at NgModel._setUpControl (forms.mjs:4076:37)
    at NgModel.ngOnChanges (forms.mjs:4035:18)
    at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:4110:14)
    at callHookInternal (core.mjs:5150:14)
    at callHook (core.mjs:5181:9)
    at callHooks (core.mjs:5131:17)
    at executeInitAndCheckHooks (core.mjs:5081:9)
    at selectIndexInternal (core.mjs:11373:17)
    at Module.ɵɵadvance (core.mjs:11356:5)
    at LayoutListPage_Template (layout-list.page.html:28:9)
    at executeTemplate (core.mjs:11620:9)
    at refreshView (core.mjs:13238:13)
    at detectChangesInView (core.mjs:13454:9)
    at detectChangesInViewIfAttached (core.mjs:13414:5)
    at detectChangesInComponent (core.mjs:13403:5)
    at detectChangesInChildComponents (core.mjs:13467:9)
    at refreshView (core.mjs:13292:13)
...

When I set a breakpoint in _throwMissingValueAccessorError the stack trace shows this error is on the first bound property (in the 2nd ion-button component:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title
      ><span class="title" [ngClass]="{ searching: searching }">Layouts</span>
      <ion-searchbar
        #search
        [(ngModel)]="queryText"
        [ngClass]="{ searching: searching }"
        color="light"
        (ionChange)="updateLayouts()"
        placeholder="Search"
        type="search"
      >
      </ion-searchbar
    ></ion-title>
    <ion-buttons slot="end">
      <ion-button class="search-icon" (click)="toggleSearch()" title="Search">
      </ion-button>
      <ion-button
      <!-- *** The error is on the [fill] bound property *** -->
        [fill]="filteringFill"
        [color]="filteringColor"
        (click)="presentFilter()"
        title="Filter Layouts"
      >
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <div class="index-list" [hidden]="!layoutsVisible()">
    <app-layout-list-item
      class="index-list__item"
      *ngFor="let layout of layouts"
      [layout]="layout"
      [favorite]="favorite(layout)"
      [includedTagNames]="includedTagNames"
      [favoritesOnly]="favoritesOnly"
      (tagFilter)="filterByTag($event)"
      (favoriteFilter)="filterFavoritesOnly()"
    >
      <ion-grid class="ion-no-padding">
        <ion-row class="ion-text-nowrap actions">
          <ion-col size="4">
            <ion-button
              expand="block"
              (click)="viewLayout(layout)"
              data-cy="view"
            >
              <fa-icon slot="start" [icon]="['fad', 'eye']" size="lg"></fa-icon>
              <label>View</label>
            </ion-button>
          </ion-col>
          <ion-col size=" 4">
            <ion-button
              expand="block"
              (click)="editLayout(layout)"
              [disabled]="disableEdit()"
            >
              <fa-icon
                slot="start"
                [icon]="['fad', 'edit']"
                size="lg"
              ></fa-icon>
              <label>Edit</label>
            </ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button expand="block" data-cy="more" (click)="more(layout)">
              <fa-icon [icon]="['fad', 'ellipsis-h']" size="lg"></fa-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </app-layout-list-item>
  </div>

I’ve imported all the Ionic components into a Shared NgModule that is imported into this module. I’ve also explicitly imported IonButton into this module and the result is the same.

If I remove the bound fill and color properties, the error moves further down the file to this line:
<div class="index-list" [hidden]="!layoutsVisible()">

I’m happy to provide any more information; I’m at a loss as to how to resolve this issue.