Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Angular schematics generates blank lines through template

オープン
#27,896 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
angular, typescript
領域
cli, tooling

調査の方向性

npm run build と schematics .:ui-generator --name=hello を使用して、インラインの <% ... %> schematic テンプレートにある空行を再現します。まず Angular CLI schematics がテンプレートコマンドをどのようにレンダリングするかを追跡し、次に生成された出力でコマンドだけに属する空白が省略され、周囲の内容が保持されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
17時間 25分
マージ済み PR(30日)
183

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。