Angular-cli: `extractCss` adds unclosed `link` tag, breaks XHTML index pages

[MilesBHuff]

Feature

Command (mark with an x)

This is a Webpack configuration issue, and is not directly related to any of Angular CLI's commands.

Is this a regression?

Yes (fixed in 2016; broken at some later date) (https://github.com/angular/angular-cli/pull/3743)

Description

The extractCss setting in angular.json adds an unclosed link tag to the DOM. This breaks XHTML index pages.

🔬 Minimal Reproduction

1. In angular.json, set extractCss to true for all builds.
2. Make sure your index.xhtml file is valid polyglot HTML5/XML.
3. Start the dev server.

🔥 Exception or Error

XML Parsing Error: mismatched tag. Expected: </link>.
Location: http://localhost:4200/
Line Number ##, Column 45:
    <link rel="stylesheet" href="styles.css"></head>

🌍 Your Environment

Angular Version: 9.0.1

Anything else relevant? No, this issue's pretty simple.

[MilesBHuff]

Moved from https://github.com/angular/angular/issues/35404.

[MilesBHuff]

This issue was fixed in 2016, but seems to have recurred. (https://github.com/angular/angular-cli/issues/3217)

[santoshyadavdev]

You can read here https://en.m.wikipedia.org/wiki/Polyglot_markup

[santoshyadavdev]

Sorry for confusion earlier , what I wanted to write is in polygot all tags should have closing tag.

[dgp1130]

We don't officially support XHTML at the moment, so this isn't exactly a regression. It may have worked in the past, but that is more coincidental rather than intentional. Proper support for XHTML would include full test coverage across the toolchain to verify XHTML support.

This is more of a general feature request. @IgorMinar, any thoughts of whether we want to take the effort to fully support XHTML?

[alan-agius4]

Note: Ivy compiler will generate HTML5 code. If you insert XHTML in a template ex: <br />, the rendered HTML will be HTML <br _ngcontent-rjm-c0>.

[MilesBHuff]

@dgp1130 While XHTML is not Angular's language of choice, this is still a regression, because XHTML support here was previously deliberately implemented, as can be seen in the issue I linked earlier (https://github.com/angular/angular-cli/issues/3217#issuecomment-269234599), and broke later-on.

[sacgrover]

As per my understanding, these link tags are not a part of Ivy compiler as they are included in index.html not generated by any component. W3 Validator will validate only index.html static tags not the element created dynamically. So closing the link tag should resolve this issue.

[MilesBHuff]

That is correct, this link tag is completely outside of Ivy.
As I understand it, the fix is a simple boolean setting in a Webpack plugin.

[IgorMinar]

After looking briefly through this and related issues I agree that we should treat this as a regression and add on integration test to prevent further regressions.

[dgp1130]

I filed a separate issue for adding comprehensive test coverage and making sure we don't regress from future changes and verify our current support across the toolchain. That's a non-trivial amount of work, so we'll need to budget for it accordingly: https://github.com/angular/angular-cli/issues/17036.

This issue can just worry about the individual <link> tag, and we can address any other regressions we find as they come up organically or as we identify them through adding these tests.