bug: Can't bind to 'ngForIn' error despite importing CommonModule

[jorroll]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I have a project with two simple modules EmailModule and CalendarModule. Both modules are exactly the same other then the names (both import CommonModule). In EmailModule, I can use *ngFor on a <div> element. In CalendarModule, I receive a compilation error:

Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'div'

A working demonstration of the bug can be seen on StackBlitz here. Simply uncomment the html code in the calendar.component.ts file.

Notice that the exact same code in EmailModule works. I'm experiencing this problem on both my local dev environment, as well as StackBlitz.

Expected behavior

It is expected that both EmailModule and CalendarModule compile without error and that I can use *ngFor on a div element.

Minimal reproduction of the problem with instructions

A working demonstration of the bug can be seen on StackBlitz here. Simply uncomment the html code in the calendar.component.ts file.

Environment

Angular version: 5.1.2


Browser:
- [x] Chrome (desktop) version 63
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.1  
- Platform:  Mac 

Others:

• Angular-CLI: 1.5.0

[ericmartinezr]

https://angular.io/api/common/NgForOf

[jorroll]

@ericmartinezr oh wow, THANK YOU!

[siteantipas]

I face the same issue.

[jorroll]

@siteantipas the syntax is *ngFor="let item of items".

You incorrectly used the syntax *ngFor="let item in items" (as had I, when I created this).

It's not a great error message, but it's a default one for these types of errors in Angular.

[angular-automatic-lock-bot]

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