Angular schematics generates blank lines through template

Open
#27,896 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
cli, tooling

Research direction

Reproduce the blank lines from the inline <% ... %> schematic template using npm run build and schematics .:ui-generator --name=hello. Start by tracing how Angular CLI schematics render template commands, then verify that generated output omits command-only whitespace while preserving the surrounding content.

Written by the indexing model from the issue text.

Description

area: @angular-devkit/schematics freq1: low severity2: inconvenient type: bug/fix workaround2: non-obvious
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

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.