fix: better error messages for NgFor

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior
While there have been a lot of improvements in the error messages space in Angular, it turns out that there's one case left that can causes many hours of debugging, because the error message is confusing.

When forgetting the let keyword in NgFor's micro syntax, that error message points the developer in a wrong direction. Basically, doing this:

<ANY *ngFor="item of items"></ANY>

Throws this error:

Can't bind to 'ngFor' since it isn't a known property of 'ANY'.
1. If 'ANY' is an Angular component and it has 'ngFor' input, then verify that it is part of this module.
2. If 'ANY' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

This error messages usually occurs when one forgets to add/export a directive/component (in this case NgFor), but the actually issue is that the developer forgot the let keyword in the micro syntax.

Unfortunately this caused me once 1.5 hours of debugging and wondering why Angular thinks I haven't declared NgFor anywhere, while it is in fact properly setup.

I'm seeing more and more people running into this, so I thought it's worth bringing up.

Expected behavior
It would be cool if we can throw a more specific error message, or maybe extend the existing one to tell the developer that she needs to double-check the micro syntax.

**Plunker for reproduction

https://plnkr.co/edit/SAI2cYUjuiVXcg4sL8vz?p=preview (check the console)

Angular version: 2.x.

pls add a plunkr

@DzmitryShylovich

@DzmitryShylovich added to the description.

@vicb

@vicb is item of items a valid expression? I'm trying to figure out the right place for the fix. I think Parser should throw

Hello! some news about it? I have the same error

@BrunoViera

@BrunoViera to fix this change <ANY *ngFor="item of items"></ANY> into <ANY *ngFor="let item of items"></ANY> the part you were missing was the let.
This issue however is about improving the error messages that it throws when this situation does occur

So I gave at shot at a fix for this. Bear in mind that this is my first time doing something like this so feel free to just shut me down if I'm wrong :) I'm not entirely sure how to link the pull request I made :( But it is the only pull request in the compiler-builds repo

@eldaromer any PR to Angular should be made in this repo
eg https://github.com/angular/angular/pulls

@Toxicable

@Toxicable sorry, I'll delete the other one and fix it, thank you!

Same with 'ngIf' directive. You get same message if directive syntax is messed up.
Plunker: https://plnkr.co/edit/y1R2KaRRnfMFXJH2mCe1

@Toxicable

@eldaromer @Toxicable Is this fixed, or can I take a look at it?

@Math3v

@Math3v it's not fixed, feel free to make a PR for it

@Toxicable

@Toxicable PR is in place.

This issue should now be fixed with a new extended template diagnostic.

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.}

Navigation Menu

Repository navigation

fix: better error messages for NgFor #14641

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

fix: better error messages for NgFor #14641

Description

Activity

DzmitryShylovich commented on Feb 22, 2017

0x-r4bbit commented on Feb 22, 2017

DzmitryShylovich commented on Feb 23, 2017

BrunoViera commented on Apr 2, 2017

Toxicable commented on Apr 8, 2017

emeldar commented on Apr 12, 2017

Toxicable commented on Apr 12, 2017

emeldar commented on Apr 12, 2017

doctorstal commented on May 10, 2017

Math3v commented on Jun 7, 2017

Toxicable commented on Jun 8, 2017

Math3v commented on Jun 8, 2017

jessicajaniuk commented on Aug 8, 2022

angular-automatic-lock-bot commented on Sep 8, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions