Angular schematics generates blank lines through template

[SaiSatwik]

Command

generate

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have ng schematics template __name@dasherize__.component.html with content :

<% for (let row of getComponents().rows) { %>
<div class="row">
  <% for (let field of row.fields) { %>
  <% if (field.type === 'InputStrxing') { %>
  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>
  <% } %>
  <% } %>
</div>
<% } %>

I build it with :

npm run build 
schematics .:ui-generator --name=hello

Generated code creates empty lines on place where is put command "<%" in template, see:

<div class="row">
  
  
  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>
  
  
  
  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>
  
  
  
  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>
  
  
  
  
</div>

Is there anyway these white spaces can be avoided. If we have to do it manually, it might kill the purpose of this code generator tool

Minimal Reproduction

Write a schematic template code with inline code <% inline code %>. Then build and generate code using commands

npm run build 
schematics .:ui-generator --name=hello

We can see generated code is having while spaces wherever inline code is present.

Exception or Error

No response

Your Environment

ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.2.14
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1602.14
@angular-devkit/core         16.2.14
@angular-devkit/schematics   16.2.14
@schematics/angular          16.2.14
typescript                   5.1.6

Anything else relevant?

No response

[alan-agius4]

The current functionality is as expected, although I agree we should offer an option to eliminate such whitespace.

To prevent whitespace generation, adjust the template as shown below:

<% for (let row of getComponents().rows) { %>
  <div class="row"><% for (let field of row.fields) { if (field.type === 'InputString') { %>
        <field labelCode="code" class="col-sm-6 col-md-3">
             <input name="code" ngModel [readonly]="readOnly">
        </field><% }} %>
  </div><% } %>

This revision maintains the structure while reducing unnecessary whitespace between elements.