Why am I getting an TypeError: instanceCleanupFn is not a function error when trying to navigate to a new route after upversioning Angular to 15

Question

I recently up-versioned my Angular app to version 15 from version 14. I have a material toolbar that I am using for navigation. In the toolbar, I have multiple a tags that get populated with routerLinks that end up linking to another page.

Here is what the code looks like:

<mat-toolbar class="toolbar" color="primary">
  <a class="logo-container" routerLink="/home"><img class="logo-image" src="ui/assets/logo_light.png"/></a>
  <a *ngFor="let item of mainMenu" class="nav-link" routerLinkActive="nav-link-selected"
     [routerLink]="item.url">
    <mat-icon aria-hidden="false" [attr.aria-label]="item.aria" class="nav-icon">{{ item.icon }}</mat-icon>
    {{ item.text }}
  </a>
  <ng-container>
    <div (mouseenter)="showSystemMenu = true" (mouseleave)="showSystemMenu = false">
      <div *ngIf="systemMenu.length > 0" class="app-nav-item">
        <a class="nav-link" [ngClass]="{'nav-link-selected' : selectedMenuItem && selectedMenuItem.menu === System }">
          <mat-icon aria-hidden="false" aria-label="System Menu" class="nav-icon">settings</mat-icon>
          System</a>
      </div>
      <div style="position:relative;">
        <div *ngIf="showSystemMenu" class="system-menu" (click)="showSystemMenu = false">
          <ng-container *ngFor="let item of systemMenu">
            <button class="dropdown-nav-link" [attr.aria-label]="item.aria" routerLinkActive="nav-link-selected"
                    [routerLink]="item.url"
                    mat-menu-item>
              <mat-icon class="dropdown-nav-icon">{{item.icon}}</mat-icon>
              {{item.text}}
            </button>
            <mat-divider></mat-divider>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</mat-toolbar>

I am looping through both the mainMenu and the systemMenu, these arrays look like this: mainMenu:

[
    {text: 'Home', url: '/home', icon: 'home', aria: 'Home', menu: this.Main},
    {
      text: 'Dashboard',
      url: '/dashboard',
      icon: 'dashboard',
      aria: 'Dashboard',
      menu: this.Main
    },
    {text: 'Search', url: '/search', icon: 'zoom_in', aria: 'Search', menu: this.Main},
  ];

systemMenu:

[
    {text: 'System1', url: '/system1', icon: 'fact_check', aria: 'System1', menu: this.System},
    {
      text: 'System2',
      url: '/system2',
      icon: 'settings_input_component',
      aria: 'System2',
      menu: this.System
    },
    {text: 'System3', url: '/system3', icon: 'label', aria: 'System3', menu: this.System},
    {text: 'System4', url: '/system4', icon: 'groups', aria: 'System4', menu: this.System},
    {text: 'System5', url: '/system5', icon: 'query_stats', aria: 'System5', menu: this.System},
    {text: 'System6', url: '/system6', icon: 'science', aria: 'System6', menu: this.System},
    {
      text: 'System7',
      url: '/system7',
      icon: 'description',
      aria: 'System7',
      menu: this.System
    },
    {text: 'System8', url: '/system8', icon: 'folder_open', aria: 'System8', menu: this.System},
    {text: 'System9', url: '/system9', icon: 'psychology_alt', aria: 'System9', menu: this.System}
  ];

All of these routes exist, but when I try to click between them, I get the following error:

ERROR Error: Uncaught (in promise): TypeError: instanceCleanupFn is not a function
TypeError: instanceCleanupFn is not a function
    at processCleanups (core.mjs:5952:13)
    at cleanUpView (core.mjs:5893:9)
    at destroyViewTree (core.mjs:5725:17)
    at destroyLView (core.mjs:5870:9)
    at RootViewRef.destroy (core.mjs:11797:9)
    at ComponentRef.destroy (core.mjs:12218:23)
    at RouterOutlet.deactivate (router.mjs:2622:28)
    at ActivateRoutes.deactivateRouteAndOutlet (router.mjs:2996:28)
    at ActivateRoutes.deactivateRouteAndItsChildren (router.mjs:2969:18)
    at ActivateRoutes.deactivateRoutes (router.mjs:2958:22)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:24165:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)

Not ensure why I am getting this error, in Angular v14, this worked without a problem.

Answer 1

Just in case someone else comes across this problem, I have found what was causing the issue. After doing a few hours worth of digging, I found that the culprit was incorrect usage of mat-icon-buttons.

The buttons had looked like this on multiple pages:

<button mat-icon mat-icon-button>
  <mat-icon>name_of_icon</mat-icon>
</button>

When navigating to a page with these buttons, then trying to leave said page, Angular had a problem cleaning them up and destroying them as they are not formatted correctly. These buttons would end up in the array of items that were included for the instance cleanup function as QueryItems. So essentially, Angular was trying to run a function that was really just an object for the material button. And an object isn't a function, hence the error.

To fix this problem, I needed to remove the mat-icon from the button. So your buttons should look like so:

<button mat-icon-button>
   <mat-icon>name_of_icon</mat-icon>
</button>

Now that the mat icon button is formatted correctly, the issue is resolved.

Answer 2

Thank you!!! that was the solution!!! My problem in Angular 15 was with the mat-button, removing it solved it.

<button mat-button matSuffix mat-icon-button aria-label="Clear" (click)="clearTableFilter()">
     <mat-icon>close</mat-icon>
</button>

<button matSuffix mat-icon-button aria-label="Clear" (click)="clearTableFilter()">
     <mat-icon>close</mat-icon>
</button>