Whitespaces on HTML

🚀 Feature request

Command (mark with an x)

- [x] build
- [x] serve

Description

Hello, we’re experiencing issues when webpack compiles our application because angular does not allow us to modify whitespace settings. Currently the whitespace settings are not available via the cli config, which causes that each and every single line of HTML code to have a whitespace in between when minified. This settings eventually leads to have HTML code resulting as this: <a href="#"> My link </a>. And therefore to have a sentence with spaces around clickable. The responsible for the HTML and I have tried to find a way to proceed but we haven’t found a consistent solution that solves 100% of the issues, so my question is: Is there any particular reason angular is preventing us to change this setting?

Describe the solution you’d like

Configurable angular-cli or webpack configuration.

Describe alternatives you’ve considered

Talking with my team we was considering to expand webpack configuration with ngx-build-plus but we think is a problem to be solved on official cli.

[Guillerming]

@alxhub @pkozlowski-opensource

My coworker and I have been revisiting the issue carefully, taking your examples in consideration and trying to get deeper in what the problem’s root could be. And this is what we came out with.

If we take this example:

<a>Click </a><a>me</a>

And we make the compiler to trim the spaces, we would have the following output:

<a>Click</a><a>me</a>

Which, of course, is not desirable because the we have intendedly typed a space character that the compiler is removing afterwards.

But nobody asked here for the compiler to trim spaces.

Yet, funnily enough, if we type the following:

<a>Click</a> <a>me</a>

That space is being trimmed by the compiler, and it doesn’t matter if we wrap it within a <p> element:

<p><a>Click</a> <a>me</a></p>

The only way to prevent the compiler from trimming that space is to add more text or a &nbsp;

<p><a>Click</a> more text <a>me</a></p>
<p><a>Click</a>&nbsp;<a>me</a></p>

But adding &nbsp; is not always a way to go, as it conditions responsiveness, not to mention that adding text is often not even a possibility.

We have also realized that the current compiler obeys the following rules:

1. One single breaking line will be kept after compilation
2. Two or more breaking lines will be collapsed to a space character
3. One single breaking line + indentation/s will be collapsed to a space character

After deeply (hopefully) explaning what the problem is, I would like to invite you reopening this issue and consider the following rules instead:

1. All breaking lines will be removed rather than collapsed or kept after compilation (why do we want breaking lines on minified HTML files anyway?)
2. Indentations will be removed rather than collapsed to a single space
3. Space characters will be kept
4. Two or more spaces together will be collapsed to one single space or it will be let as it is and browser will do its job trimming them on render

Acknowledgement:

The rules just exposed have some problems as for example:

No breaking line character means no output spaces when compiling indented markup:

The following block:

<a>Link</a>
<a>Another Link</a>

Would output no spaces whatsoever between both <a>. This could be easily addressed by manually add a space after closing the first <a>.

<a>Link</a>[space here]
<a>Another Link</a>

Given the scenario in which you can manually add a space you’re missing and the scenario in which there’s no way to get rid of spaces being generated for keeping a somewhat-readable structure on HTML, I find way more intuitive and reasonable to “force” users to type the spaces they want to output rather to assume on their behalf where do they want or not spaces to be printed and “force” them to have a cryptically-indented nightmarish HTML markup that is already sweetened (read: complexed) with variables, loops, directives, bindings, etc.

Differentiate between intendedly typed spaces and indentation spaces:

Since indentations can be made up of space characters, a blind rule for deleting/keeping space characters is not suitable. The rule should be a bit more picky analizing wether there is a breaking line character before the space or if there is text/HTML markup around the space in order to accurately decide what do those spaces mean and what to do with them.

[elvisbegovic]

@segux https://github.com/angular/angular-cli/issues/10859#issuecomment-390808375