Repository navigation
fix: better error messages for NgFor #14641
Description
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.
Activity
DzmitryShylovich commentedon Feb 22, 2017
pls add a plunkr
0x-r4bbit commentedon Feb 22, 2017
@DzmitryShylovich added to the description.
DzmitryShylovich commentedon Feb 23, 2017
@vicb is
item of itemsa valid expression? I'm trying to figure out the right place for the fix. I thinkParsershould throwBrunoViera commentedon Apr 2, 2017
Hello! some news about it? I have the same error
Toxicable commentedon Apr 8, 2017
@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 thelet.This issue however is about improving the error messages that it throws when this situation does occur
emeldar commentedon Apr 12, 2017
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
Toxicable commentedon Apr 12, 2017
@eldaromer any PR to Angular should be made in this repo
eg https://github.com/angular/angular/pulls
emeldar commentedon Apr 12, 2017
@Toxicable sorry, I'll delete the other one and fix it, thank you!
doctorstal commentedon May 10, 2017
Same with 'ngIf' directive. You get same message if directive syntax is messed up.
Plunker: https://plnkr.co/edit/y1R2KaRRnfMFXJH2mCe1
Math3v commentedon Jun 7, 2017
@eldaromer @Toxicable Is this fixed, or can I take a look at it?
Toxicable commentedon Jun 8, 2017
@Math3v it's not fixed, feel free to make a PR for it
Math3v commentedon Jun 8, 2017
@Toxicable PR is in place.
jessicajaniuk commentedon Aug 8, 2022
This issue should now be fixed with a new extended template diagnostic.
angular-automatic-lock-bot commentedon Sep 8, 2022
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.