Search code examples
htmlangular2-template

Angular Template parse errors when add ul inside p tag

I am developing demo project, work fine if i not add UL tag inside P tag.

Working Code: 

<p>
<br/> Umesh test help <br/>
</p>
<ul>
<li *ngFor="let user of help2Listdata">
    <a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>

    <ul>
        <li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
        <li>{{ user.ans }}</li>
    </ul>
</li>
</ul>

non working code:

<p>
<br/> Umesh test help <br/>

<ul>
    <li *ngFor="let user of help2Listdata">
        <a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>

        <ul>
            <li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
            <li>{{ user.ans }}</li>
        </ul>
    </li>
</ul>
</p>

Error trace:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Unexpected closing tag "p". 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 ("
        </li>
    </ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
Error: Template parse errors:
Unexpected closing tag "p". 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 ("
        </li>
    </ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
    at syntaxError (compiler.js:486)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
    at compiler.js:3202
    at Object.then (compiler.js:475)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
    at compiler.js:34420
    at Array.forEach (<anonymous>)
    at compiler.js:34419
    at syntaxError (compiler.js:486)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
    at compiler.js:3202
    at Object.then (compiler.js:475)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
    at compiler.js:34420
    at Array.forEach (<anonymous>)
    at compiler.js:34419
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Please let me help to understand why am facing this issue. when i see the working code output in inspect mode it seems fine but when change the tag tree structure it throw above error in browser console.

Solution

  • Actually ul tag is not allowed inside p tags according to the w3c spec. This will fail. Try using other tag such as div or ng-content.

    EDIT: Acording to the W3C spec,p tags can olny contain "Phrasing elements", this can only be in following tags:

    a
em
strong
small
i
b