Angular-cli: I have issue with beta 24

Created on 28 Dec 2016 · 5Comments · Source: angular/angular-cli

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Please check the Versions section.

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.24
node: 7.3.0
os: linux x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

create a new project with ng new angular-test

modify app.component.ts like this:
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app works!';
products: Array;

ngOnInit() {
this.products = [];

let product = new Product();
product.id = 1;
product.name = 'Car';
this.products.push(product);

}
}

class Product {
id: number;
name: string;
}

Add this to app.component.html:

### The log given by the failure. > Normally this include a stack trace and some more information. Unhandled Promise rejection: Template parse errors: Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("

]*ngFor='let p in products'> {{p.id}} {{p.name}}

"): AppComponent@2:5
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

[ERROR ->]

Mention any other details that might be useful.

Do I miss anything?

Source

dxxvi

Most helpful comment

Oops, the ngFor syntax is "let p of products" not "let p in products". My bad.

dxxvi on 28 Dec 2016

👍2

All 5 comments

Can you show me /app.component.html?

filipesilva on 28 Dec 2016

This Markdown styling confuses me.
app.component.html looks like this:
<div *ngFor='let p in products'>{{p.id}} {{p.name}}</div>

dxxvi on 28 Dec 2016

Oops, the ngFor syntax is "let p of products" not "let p in products". My bad.

dxxvi on 28 Dec 2016

👍2

~~I wish they had not changed the syntax of in to of in Angular 2. Was it really necessary to force every single Angular user to make the above mistake.~~

Sorry, I have a hang over this morning. 🍻