エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

Angular5から11にアップデートしたらbuttonタグ同士の隙間が無くなった

f:id:tansantktk:20201123161350p:plain

先日、Angular5をAngular11にアップデートしました。
ページのレンダリングや変更検知がスムーズになり、喜んでいたのもつかの間。
f:id:tansantktk:20201124184918p:plain

なんかボタンが詰まってる……?🤔
(※スクリーンショットのボタンはイメージです)




ちなみに元々のボタンは↓のような感じでした。
f:id:tansantktk:20201124185044p:plain

Angularをアップデートしただけのはずだが何故…?と思いいろいろと調べてみました。

原因

  • Angular6からHTMLテンプレートの改行を除去する処理がデフォルトでONになっている為でした。

例えば複数のbuttonタグを記述する際、改行を入れて記述するのと、1行で記述するのとではブラウザによる解釈のされ方が異なります。

See the Pen white-spaceによる違い by TM (@tansanmilmil) on CodePen.

↑のコードを比較していただくと分かりますが、buttonタグの間に改行を挟まなかった場合、隙間なくボタンは敷き詰められます。

実際にAngular11で生成されたHTMLタグをChromeの開発者ツールで確認してみると、改行無しでbuttonタグが生成されていることが確認できました。 Angularでは開発者が記述したHTMLテンプレートは、コンパイル時にjsファイルとして変換され、DOM要素を生成しますが、 このDOM要素を生成するまでの過程で、改行が除去されてしまっていたのでした。

改行除去のON/OFFは何処で定義できる?

tsconfig.jsonpreserveWhitespacesで定義できます。 以下のようにboolean型でコンパイル後に改行を保持するか(true)、除去するか(false)を設定します。

tsconfig.json

{
  "compileOnSave": false,
  "angularCompilerOption": {
      "preserveWhitespaces ": true   // コンパイル後に改行を保持する
   },
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "",
    "allowJs": true
  },
  "exclude": [
    "**/node_modules/*",
    "**/documentation/*",
    "**/dist/*"
  ]
}

Angular5では改行を保持するのがデフォルト値だったのですが、Angular6から改行を除去するのがデフォルト値になっています。

地味な変更ですが、いくらCSSを確認してもmarginが無いので焦りました…。

参考

stackoverflow.com