question-mark
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.

ngFor over functions causes type error with Ivy

See original GitHub issue

🐞 bug report

Affected Package

@angular/common, maybe? It’s a compile-time error using nothing special except *ngFor

Is this a regression?

This appeared as I was upgrading from Angular 9.1.0, though @JoostK below (https://github.com/angular/angular/issues/39634#issuecomment-725341454) was able to reproduce it on the latest 9.0.x and 9.1.x.

Description

When looping over an array of functions using *ngFor, a strange typing error occurs when calling that function in the template. For example in this template it gives an error like the following:

export class AppComponent  {
  functions = [() => 1, () => 2];
}

<p *ngFor="let fn of functions">
	{{ fn() }}
</p>

Property 'fn' does not exist on type '() => number'.

You’ll see that it somehow is trying to find fn on the function itself? It works fine if you turn off Ivy.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-vttvch?file=src/app/app.component.html

🔥 Exception or Error

Property '__' does not exist on type '___'.

🌍 Your Environment

Angular Version:


Angular CLI: 10.2.0
Node: 12.18.1
OS: win32 x64

Angular: 10.2.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    10.2.7
@angular/cli                    10.2.0
@angular/material               10.2.7
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant? Must be using ivy

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ersimontcommented, Nov 12, 2020

@AleksanderBodurri Nice ideas. Thank you, that workaround unblocks me for now!

0reactions
angular-automatic-lock-bot[bot]commented, Dec 17, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ngFor produces empty content - Angular 7 IVY
ngFor produces empty content - Angular 7 IVY ... I'm playing around with angular 7 and ivy, and I cannot get a for...
Read more >
Ivy compatibility examples - Angular Hispano
ERROR: This constructor is not compatible with Angular Dependency Injection because its dependency at index X of the parameter list is invalid. This...
Read more >
Lazy loading Angular modules with Ivy
To solve this issue we need to create an NgModule that declares our component and imports CommonModule , just like we normally would ......
Read more >
NgFor • Angular - codecraft.tv
We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element. The template...
Read more >
Angular 9's Best Hidden Feature: Strict Template Checking
Find and report more errors than ever with Angular 9's Ivy ... We use a lot of *ngFor directives in our templates to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found