Unexpected closing tag | angular2.5 | custom tags

Question

<someTag data_value="somevalue" class="card">
    <div class="some" *ngFor='let item of tempData'>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.id }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.name }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.status }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.sent }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.views }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.clicks }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.source }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.created }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.report }}</span>
        </someTag>
        <someTag data_value="somevalue"><hr></someTag>
    </div>
</someTag>

When I use this code inside my main component's html file, I get the following error:

> ERROR Error: Uncaught (in promise): Error: Template parse errors:
> Unexpected closing tag "sometag". It may happen when the tag has
> already been closed by another tag. For more info see
> https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
>               <sometag data_value="somevalue"><hr></sometag>
>           </div>  [ERROR ->]</sometag>"): ng:///someModule/someComponent.html@65:1

but when I make a new component :

@Component({
    selector: 'some-list',
    styleUrls:['some.component.css'],
    template: `
        <div class="some" *ngFor='let x of data'>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.id }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.name }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.status }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.sent }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.views }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.clicks }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.source }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.created }}</span>
            </sometag>
            <sometag data_value="somevalue" class="text-align-center">
                <span class="fs-6">{{ x.report }}</span>
            </sometag>
            <sometag data_value="somevalue"><hr></sometag>
        </div>
    `,
})
export class ListComponent{
    @Input() data;
}

and use the above new component inside the main component's file,

<someTag data_value="somevalue" class="card">
     <some-list [data]="tempData"></some-list>
</someTag>

It works without error.

Question:- What could be the possible reason for this?

Yes :-
I checked end tags.
I counted end tags.
I don't have any unclosed tags since the new component is just a copy paste of this loop code.

Answer 1

You are having an opening div tag modify it to closing </div>

<someTag data_value="somevalue" class="card">
    <div class="some" *ngFor='let item of tempData'>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.id }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.name }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.status }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.sent }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.views }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.clicks }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.source }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.created }}</span>
        </someTag>
        <someTag data_value="somevalue" class="text-align-center">
            <span class="fs-6">{{ item.report }}</span>
        </someTag>
        <someTag data_value="somevalue"><hr></someTag>
    </div> ------------------- here
</someTag>

Answer 2

<someTag data_value="somevalue" class="card">
   <some-list [data]="tempData">
   </some-list> -------------------add closing tag
</someTag>

Answer 3

I think your problem is <hr> tag on last <someTag> , remove it and it will works. I'm looking for a reason about it, I don't know if it is a angualar2+ bug.

I have had the same problem and I resolved it with a div with css.

<someTag data_value="somevalue"><div class="horizontal_line"></div></someTag>