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:
- Created 3 years ago
- Comments:7 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@AleksanderBodurri Nice ideas. Thank you, that workaround unblocks me for now!
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.