Angular 2 parsing template error

Question

I'm new to angular 2, and I'm using angular-rc-4 version.

When I combine angular 2 with bootstrap icon, the template can't be parsed.

Unexpected closing tag "li"

Thanks for your help

Below is my code:

import { Component } from '@angular/core';
import { CourseService } from './course.service';
import { AutoGrowDirective } from './auto-grow.directive';

@Component({
    selector: 'courses',
    template: `
        <h2>Courses</h2>
        {{ title }}
        <input autoGrow [(ngModel)]="title"/>
        <input type="button" (click)="title = ''" value="Clear">
        Preview
        {{ title }}
        <ul>
            <li *ngFor="let course of courses">
                <i class="glyphicon glyphicon-star" />
            </li>
        </ul>

        <div (click)="onDivClick()">
            <button class="btn btn-primary" [class.active]="isActive" (click)="onClick($event)">Create</button>
        </div>
        `,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title = 'The title of courses page';
    courses: string[];
    isActive = true;

    constructor(courseService: CourseService) {
        this.courses = courseService.getCourses();
    }

    onClick($event){
        $event.stopPropagation();
        console.log('Clicked', $event);
    }
    onDivClick($event){
        console.log('On Div Clicked', $event);
    }
}

Answer 1

Self-closing elements are not correctly parsed by Angular 2 and not planned on be implemented.

That's why you have to close all tags correctly:

<li *ngFor="let course of courses">
    <i class="glyphicon glyphicon-star"></i>
</li>

---

From the Github Issue:

we considered many options are here is the conclusion:

• the default html parser will throw if it comes across a custom element that is self-closing or missing closing-tag
• in the future we will make it easy to use custom template parsers that can support self-closing custom elements

reasoning:

• current angular html templates are valid html5 fragments (even after the case-sensitivity change, they will be valid html5, but with higher fidelity)
• custom element spec currently doesn't allow custom elements to be self-closing or void
• we should not deviate from standards
• we care about usability though and that's why we'll make it possible to author templates in other syntaxes (e.g. xhtml5, custom stuff, jade, whatever)
• we don't want to rush the decision on the default behavior since we are under beta pressure. relaxing this rule in the (near) future even for the default parser is possible without a breaking change (the reverse is not)

Answer 2

i tag isn't self closing tag, you have to close it manually. You forgot to close <i> tag which is messing up with li as well & confusing ngFor directive where li has ended.

Template

<ul>
    <li *ngFor="let course of courses">
        <i class="glyphicon glyphicon-star"></i>
    </li>
</ul>