Angular 2: why no empty element tags?

Question

Why can I not use empty element tags in my ng2 template. It is the same with the section as with a file in templateUrl.

<p></p>    // OK

<p/>       // NOK (endless "Loading...")

???

cheers, chris

kind user · Accepted Answer · 2017-02-27T13:41:34.707

3

p tag is not a non closing element in html. The non-closing elements are e.g. img, input or br. If you don't close it - the loading will be shown endlessly because the compiler will throw a template parse error:

Uncaught Error: Template parse errors:
Only void and foreign elements can be self closed "p" ("
</p>
[ERROR ->]<p/>

edited Feb 27 '17 at 13:41

answered Feb 27 '17 at 13:11

kind user

32,209
6
49
63

I do not see that error. But the compiler prints "Build successful" as usually. I started with "ng serve". But it is "Loading..." forever. Do I need to set something? – chris01 Feb 27 '17 at 13:21
1

@chris01 Open the console and you will see it. – kind user Feb 27 '17 at 13:21
1

I see, its in the JS console of the browser, thanks! – chris01 Feb 27 '17 at 13:25

score 1 · Answer 2 · edited May 23 '17 at 12:32

Angular2 only allows valid HTML5 in component templates.

See also https://stackoverflow.com/a/3558200/217408

In HTML5, the meaning of <foo /> [depends on the type of element][1].

On HTML elements that are designated as void elements, end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.

On other HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.

Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

[1]: https://www.w3.org/TR/html5/syntax.html#start-tags

Angular 2: why no empty element tags?

2 Answers2