Angular5から11にアップデートしたらbuttonタグ同士の隙間が無くなった
先日、Angular5をAngular11にアップデートしました。
ページのレンダリングや変更検知がスムーズになり、喜んでいたのもつかの間。
なんかボタンが詰まってる……？🤔
（※スクリーンショットのボタンはイメージです）
ちなみに元々のボタンは↓のような感じでした。
Angularをアップデートしただけのはずだが何故…？と思いいろいろと調べてみました。
原因
- Angular6からHTMLテンプレートの改行を除去する処理がデフォルトでONになっている為でした。
例えば複数のbuttonタグを記述する際、改行を入れて記述するのと、１行で記述するのとではブラウザによる解釈のされ方が異なります。
See the Pen white-spaceによる違い by TM (@tansanmilmil) on CodePen.
↑のコードを比較していただくと分かりますが、buttonタグの間に改行を挟まなかった場合、隙間なくボタンは敷き詰められます。
実際にAngular11で生成されたHTMLタグをChromeの開発者ツールで確認してみると、改行無しでbuttonタグが生成されていることが確認できました。 Angularでは開発者が記述したHTMLテンプレートは、コンパイル時にjsファイルとして変換され、DOM要素を生成しますが、 このDOM要素を生成するまでの過程で、改行が除去されてしまっていたのでした。
改行除去のON/OFFは何処で定義できる？
tsconfig.jsonのpreserveWhitespacesで定義できます。
以下のように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が無いので焦りました…。