angular schematics generates blank lines in template, how to prevent it?

Question

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 === 'InputString') { %>
  <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>

If I put schematics commands in template after html tags, like here :

<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><% } %>

then html is generated like it should be - without empty lines.

<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>

What do I wrong? Is is possible write schematic template command in "human readable" style? I mean in formatted style, or really must put command after html tags?

Scotsman

Good question, Have the same problem. Did you find a solution? – Vernievernier

Sadly no, I hope it will be fixed over time... – Scotsman

Answer 1

Try this:

<% 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>
<% } %>

My understanding is thinking the code like this:

 <div class="row"> <!-- line break here -->
    <% for (let field of row.fields) { %> <!-- line break here -->
      <% if (field.type==='InputString' ) { %> <!-- line break here -->
        <field labelCode="code" class="col-sm-6 col-md-3"> <!-- line break here -->

So, the schematics is doing what is asked for, adding all those break lines. That's why moving the symbols will convert that code fragment in what you need.

Overarch