Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular 12 build error - Type '(index: any, item: DropDownItem<any>) => string' is not assignable to type 'TrackByFunction<any>'

See original GitHub issue

🐞 Bug report

I upgrade my private library to angular 12 from angular 11. I start to get error when I build the project.

Error: projects/.../default-drop-down-items.component.html:64:50 - error TS2322: Type '(index: any, item: DropDownItem<any>) => string' is not assignable to type 'TrackByFunction<any>'.

64       <ng-container *ngFor="let item of ddItems; trackBy: trackById; let index = index">
                                                    ~~~~~~~

  projects/.../default-drop-down-items.component.ts:31:16
    31   templateUrl: './default-drop-down-items.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DefaultDropDownItemsComponent.

My HTML

    <!--Dropdown Items-->
    <ng-container *ngIf="ddItems?.length; else loaderOrEmptySearch">
      <ng-container *ngFor="let item of ddItems; trackBy: trackById; let index = index">
        <ng-container
          *ngTemplateOutlet="itemTemplate;  context: {item: item, index: index }"
        ></ng-container>
      </ng-container>
    </ng-container>

My TypeScript Function

  trackById(index, item: DropDownItem): string {
    return item.value;
  }

Before upgrade to angular 12 the build pass.

In addition when I’m change My TypeScript Function as follow the build work

  trackById(index, item: any): string {
    return (item as DropDownItem).value;
  }

Am I missing something ?

Command (mark with an `x`)

build

Is this a regression?

Yes, as in angular 11 it worked.

🔥 Exception or Error


Error: projects/.../default-drop-down-items.component.html:64:50 - error TS2322: Type '(index: any, item: DropDownItem<any>) => string' is not assignable to type 'TrackByFunction<any>'.

64       <ng-container *ngFor="let item of ddItems; trackBy: trackById; let index = index">
                                                    ~~~~~~~

  projects/.../default-drop-down-items.component.ts:31:16
    31   templateUrl: './default-drop-down-items.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DefaultDropDownItemsComponent.

🌍 Your Environment


Angular CLI: 12.0.5
Node: 14.15.5
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            11.2.7
@angular-devkit/schematics      11.2.7
@schematics/angular             12.0.5
ng-packagr                      12.0.6
rxjs                            6.6.7
typescript                      4.2.4

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:10 (4 by maintainers)

Top GitHub Comments

4reactions

eun-choicommented, Jun 23, 2021

It happened after Angular update, my solution as below.

import { TrackByFunction } from '@angular/core';

trackById: TrackByFunction<any> = (index: number, item: any) => item.value;

Or, when specifying a type.

import { TrackByFunction } from '@angular/core';

trackById: TrackByFunction<DropDownItem> = (index: number, item: DropDownItem) => item.value;

1reaction

JoostKcommented, Jun 21, 2021

Okay, I have actually a small repro now with the hint that the iterable should be any[].

Top Results From Across the Web

The type 'string' is not assignable to type - Stack Overflow

I am pretty sure that angular's new typed form feature is responsible for the error produced. Nevertheless the feature probably did not work ......

Building and serving Angular apps

This page discusses build-specific configuration options for Angular projects. Configuring application environmentslink. You can define different named ...

Identify and Fix Build and Deployment Errors in Your Angular ...

In this guide, you will learn how to spot some of the most common build and deployment errors and how to resolve them...

Angular *ngFor Argument type index is not assignable to ...

What steps will reproduce the problem? Create a *ngFor loop and use its index as e.g. index as i; Use this index i...

Type 'Map<string, number>' is not assignable to type 'Log ...

Index signature is missing in type 'Map<string, number>'. ... you can make data a regular object with any string accessor like Log is...