[SOLVED] TypeError: Cannot read properties of null (reading 'destroyed')

Ionic Framework Ionic Angular
1

I have some code that works fine as long as the internet is up, but when Wi-fi drops then reconnects, websockets reconnects yet one of my ReplaySubjects/formControls throws the error below, and the selector only shows one of the serials, not the entire list. I know it’s a problem with that particular ReplaySubject because I commented out the [formControl] and the error stopped (but of course it doesn’t show the selector). Please advise.

  • Ionic 5.4.16
  • Angular CLI: 16.2.4
  • Node: 18.17.1
  • Angular: 16.2.7
index.js:137 TypeError: Cannot read properties of null (reading 'destroyed')
    at ViewContainerRef.move (core.mjs:24479:34)
    at common.mjs:3147:31
    at DefaultIterableDiffer.forEachOperation (core.mjs:29738:17)
    at NgForOf._applyChanges (common.mjs:3135:17)
    at NgForOf.ngDoCheck (common.mjs:3130:22)
    at callHookInternal (core.mjs:3920:14)
    at callHook (core.mjs:3951:9)
    at callHooks (core.mjs:3902:17)
    at executeInitAndCheckHooks (core.mjs:3852:9)
    at refreshView (core.mjs:13496:21)
handleError @ index.js:137
zone.umd.js:214 Uncaught TypeError: Cannot read properties of null (reading 'destroyed')
    at ViewContainerRef.move (core.mjs:24479:34)
    at common.mjs:3147:31
    at DefaultIterableDiffer.forEachOperation (core.mjs:29738:17)
    at NgForOf._applyChanges (common.mjs:3135:17)
    at NgForOf.ngDoCheck (common.mjs:3130:22)
    at callHookInternal (core.mjs:3920:14)
    at callHook (core.mjs:3951:9)
    at callHooks (core.mjs:3902:17)
    at executeInitAndCheckHooks (core.mjs:3852:9)
    at refreshView (core.mjs:13496:21)

serial-selector.component.ts

import {
  Component,
  OnDestroy,
  OnInit,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { of, Subject, ReplaySubject, BehaviorSubject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
import { SelectedSerialService } from '../../providers/selected-serial.service';
import { SerialsService } from '../../providers/serials/serials.service';

@Component({
  selector: 'app-serial-selector',
  templateUrl: './serial-selector.component.html',
  styleUrls: ['./serial-selector.component.scss'],
})
export class SerialSelectorComponent implements OnInit, OnDestroy {
  public serialSelector: FormControl;
  public serialsLength: number;
  public friendlyNames$: ReplaySubject<string[][]>;
  private onDestroy$: Subject<void>;
  private lastSerial: string;

  constructor(
    private selectedSerialService: SelectedSerialService,
    private serialsSvc: SerialsService
  ) {
    this.serialSelector = new FormControl();
    this.serialsLength = 0;
    this.lastSerial = '';
    this.onDestroy$ = new Subject<void>();
    this.friendlyNames$ = new ReplaySubject<string[][]>();
  }

  public async ngOnInit(): Promise<void> {
    this.getFriendlyNames();
    this.watchSerialSelector();
  }

  private async getFriendlyNames() {
    this.serialsSvc
      .getFriendlyNames()
      .subscribe(async (friendlyNames: string[][]) => {

        if (friendlyNames.length === 0) {
          // Empty
          return;
        }

        if (friendlyNames.length === 1) {
          if (friendlyNames[0].length === 2) {
            if (friendlyNames[0][0] === '') {
              // Empty
              return;
            }
          }
        }

        this.friendlyNames$.next(friendlyNames);

        this.serialsLength = Object.keys(friendlyNames).length;
      });
  }

serial-selector.component.html

<ion-item
  *ngIf="serialsLength > 1"
  class="input-item"
>
  <ion-select interface="popover" [formControl]="serialSelector">
    <ion-select-option *ngFor="let nameSet of (friendlyNames$ | async)" [value]="nameSet[0]">
      {{ nameSet[1] }}
    </ion-select-option>
  </ion-select>
</ion-item>
2

Fixed the problem by changing the ReplaySubject array of strings to just an array of strings.

  public friendlyNames: string[][];

    <ion-select-option *ngFor="let nameSet of friendlyNames" [value]="nameSet[0]">
      {{ nameSet[1] }}
    </ion-select-option>