AngularJS HTML formatting incorrect

I’m testing out the new HTML formatting on a AngularJS project at work. But unfortunately it messes up the code. I’m running the latest version of the VSCode plugin.

I’ll attach a GIF and the problematic markup for testing: Imgur

Code:

<div class="row">
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{"statisticsTimeFor" | i18n}} {{"statisticsLatest" | i18n}} {{"statisticsSendReportName" | i18n}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).latestReportTime}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsPollName'|i18n}}  {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollStatusName' | i18n}} <span class="glyphicon glyphicon-info-sign" uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}" tooltip-placement="right"></span></b>
        <p>{{dataStatisticsMap.get(timeUnit).pollIntervalStatusOk ? 'yes' : 'no' | i18n }}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).validationErrorsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount}}</p>
    </div>
</div>

When running the code on prettier.io > Try it out, I’m getting:

SyntaxError: Unexpected token (3:40)
  1 | <div class="row">
  2 |     <div class="col-xs-4 col-md-2">
> 3 |         <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
    |                                        ^
  4 |         <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
  5 |     </div>
  6 |     <div class="col-xs-4 col-md-2" ng-show="overviewSelected">

[JLHwung]

I did mention it in the blog post, the issue here is probably same as #5462 (comment), where Angular did strip whitespaces (insensitive) in some cases.

By stressing AngularJS versus Angular, I mean they are different framework, though they have similar name and Angular evolves from AngularJS. As it is shown on #5466, they have a slight different grammar.

@ikatyang On the fix in #5402, you did a great job! I have reviewed the code change and do find some rare cases and it should be addressed in #5480.

[MikaelEdebro]

I don’t know anything about the implementation details, and the 1000 issues that you probably have to face to support every edge case.

But as a user, I would rather prefer that print-width is disregarded if there are uncertanties about how to handle whitespace (rather than breaking up the HTML-elements in multiple lines). In my opinion print-width is not as important for readability in HTML as in JS.

For example, that this:

<div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
    <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
</div>

Would become:

<div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
        {{'statisticsSendReportName' | i18n}} {{'statisticsLatest' | i18n}} {{timeUnitSecondary}}
    </b>
    <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
</div>