Angular2 Unexpected closing tag “li”

Question

I'm new to angular 2, I am using node npm to run angular.Without looping its working quiet good. I am getting 'Unexpected closing tag "li" ("' in browser while compiling. have tried this but not working

import {Component} from 'angular2/core';

    @Component({
        selector: 'test',
        template: `<ul>
<li *ngFor="let carPart of carparts">
    <h2>{{carPart.name}}</h2>
        <h2>{{carPart.description}}</h2>
        <h2>{{carPart.inStock}} in Stock</h2>
            </li>
    </ul>`
    })
    export class AppComponent {
        carparts = [
        {
            "id": 1,
            "name": "Super Tires",
            "description": "These tires are the very best",
            "inStock": 5
        },
        {
            "id": 2,
            "name": "Reinforced Shocks",
            "description": "Shocks made from kryptonite",
            "inStock": 4
        }];
    }

Thanks in advance

Answer 1

Your problem is here

<h2>{{carPart.name}}<h2>

It should be:

<h2>{{carPart.name}}</h2>

Also you use wrong variable name

<li *ngFor="let carPart of carParts">

In your class is using carparts .

And because you're using angular beta version it should be

<li *ngFor="#carPart of carparts">

You can use let only since beta17. See also more information here:

• https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28

Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead. now becomes

Answer 2

I think your error lies here :

<h2>{{carPart.name}}<h2>

You accidentally opened to h2 - instead of closing it. You're missing a / in your end-tag. You are actually inside two h2 elements that you need to close before closing your li .

Answer 3

You are using an deprecated version of angular2, please update to RC4. Since angular precompiles html, if you have any closing tags missed also will result in error