Signal Forms: NG01904 from provideSignalFormsConfig({ classes }) when an array is replaced while the form's view is detached (RouteReuseStrategy) #70934

import {
  ChangeDetectionStrategy,
  Component,
  inject,
  Injectable,
  linkedSignal,
  signal,
} from "@angular/core";
import {
  form,
  FormField,
  provideSignalFormsConfig,
} from "@angular/forms/signals";
import { NG_STATUS_CLASSES } from "@angular/forms/signals/compat";
import { bootstrapApplication } from "@angular/platform-browser";
import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,
  provideRouter,
  Route,
  RouteReuseStrategy,
  RouterLink,
  RouterOutlet,
} from "@angular/router";

/** Stands in for a server response: every fetch returns new objects. */
const fetchItems = () => [{ name: "a" }, { name: "b" }];

@Injectable({ providedIn: "root" })
class ItemsStore {
  readonly items = signal(fetchItems());

  reload() {
    this.items.set(fetchItems());
  }
}

@Component({
  selector: "app-items-form",
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [FormField],
  // Remove this provider and the error goes away.
  providers: [provideSignalFormsConfig({ classes: NG_STATUS_CLASSES })],
  template: `
    <h2>Form page</h2>
    @for (item of itemsForm.items; track item) {
      <input [formField]="item.name" />
    }
  `,
})
class ItemsFormPage {
  private readonly store = inject(ItemsStore);
  private readonly model = linkedSignal(() => ({ items: this.store.items() }));
  readonly itemsForm = form(this.model);
}

@Component({
  selector: "app-other",
  template: `<h2>Other page</h2>`,
})
class OtherPage {}

/** Keeps every page alive when you leave it, as a tabbed UI does. */
class KeepAliveStrategy implements RouteReuseStrategy {
  private readonly handles = new Map<Route, DetachedRouteHandle>();

  shouldDetach(): boolean {
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {
    if (!route.routeConfig) return;
    if (handle) this.handles.set(route.routeConfig, handle);
    else this.handles.delete(route.routeConfig);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && this.handles.has(route.routeConfig);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return (route.routeConfig && this.handles.get(route.routeConfig)) ?? null;
  }

  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    current: ActivatedRouteSnapshot,
  ): boolean {
    return future.routeConfig === current.routeConfig;
  }
}

@Component({
  selector: "app-root",
  imports: [RouterOutlet, RouterLink],
  template: `
    <nav>
      <a routerLink="/form">Form page</a> |
      <a routerLink="/other">Other page</a>
    </nav>
    <button type="button" (click)="store.reload()">Reload data</button>
    <router-outlet />
  `,
})
class App {
  readonly store = inject(ItemsStore);
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      { path: "", pathMatch: "full", redirectTo: "form" },
      { path: "form", component: ItemsFormPage },
      { path: "other", component: OtherPage },
    ]),
    { provide: RouteReuseStrategy, useClass: KeepAliveStrategy },
  ],
}).catch((err) => console.error(err));