先日、Angular5をAngular11にアップデートしました。
ページのレンダリングや変更検知がスムーズになり、喜んでいたのもつかの間。
なんかボタンが詰まってる……?🤔
(※スクリーンショットのボタンはイメージです)
ちなみに元々のボタンは↓のような感じでした。
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.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が無いので焦りました…。