{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/23764","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/23764/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/23764/comments","events_url":"https://api.github.com/repos/angular/angular/issues/23764/events","html_url":"https://github.com/angular/angular/issues/23764","id":321091156,"node_id":"MDU6SXNzdWUzMjEwOTExNTY=","number":23764,"title":"Angular 6 layout changes: all 4px gaps removed between inline or inline-block elements","user":{"login":"jostschmithals","id":5700294,"node_id":"MDQ6VXNlcjU3MDAyOTQ=","avatar_url":"https://avatars1.githubusercontent.com/u/5700294?v=4","gravatar_id":"","url":"https://api.github.com/users/jostschmithals","html_url":"https://github.com/jostschmithals","followers_url":"https://api.github.com/users/jostschmithals/followers","following_url":"https://api.github.com/users/jostschmithals/following{/other_user}","gists_url":"https://api.github.com/users/jostschmithals/gists{/gist_id}","starred_url":"https://api.github.com/users/jostschmithals/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jostschmithals/subscriptions","organizations_url":"https://api.github.com/users/jostschmithals/orgs","repos_url":"https://api.github.com/users/jostschmithals/repos","events_url":"https://api.github.com/users/jostschmithals/events{/privacy}","received_events_url":"https://api.github.com/users/jostschmithals/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-05-08T08:31:34Z","updated_at":"2018-07-05T08:59:43Z","closed_at":"2018-05-08T08:44:21Z","author_association":"NONE","body":"## Description of the problem:\r\n\r\nAngular 6 removes all 4px gaps which the browser puts by default between inline or inline-block elements when there are line breaks in the code.\r\n\r\nSince this changed behavior seems not to be documented, I wonder whether it is intended?\r\n\r\nThis might well be considered a desired feature, but in general I would expect that I can rely on the fact that my layouts won't change unspokenly when I update a project to Angular 6.\r\n\r\n## Minimal reproduction of the problem:\r\n\r\nThis code snippet in a fresh project `(ng new ...`) - it doesn't matter where it is placed - ...\r\n\r\n```\r\nspan {\r\n  background: limegreen;\r\n  padding: 5px;\r\n}\r\n```\r\n\r\n```\r\n<span>Test</span>\r\n<span>Test</span>\r\n<span>Test</span>\r\n<span>Test</span>\r\n<span>Test</span>\r\n```\r\n... produces these outputs ...\r\n\r\n\r\n1. with Angular 5 (like in normal HTML):\r\n\r\n![ng5](https://user-images.githubusercontent.com/5700294/39745067-86c89aba-52a6-11e8-8914-107872128789.JPG)\r\n\r\n\r\n2. with Angular 6:\r\n\r\n![ng6](https://user-images.githubusercontent.com/5700294/39745078-8c1ad92e-52a6-11e8-99b8-e97334493426.JPG)\r\n\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/402654502","html_url":"https://github.com/angular/angular/issues/23764#issuecomment-402654502","issue_url":"https://api.github.com/repos/angular/angular/issues/23764","id":402654502,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMjY1NDUwMg==","user":{"login":"mischah","id":441011,"node_id":"MDQ6VXNlcjQ0MTAxMQ==","avatar_url":"https://avatars2.githubusercontent.com/u/441011?v=4","gravatar_id":"","url":"https://api.github.com/users/mischah","html_url":"https://github.com/mischah","followers_url":"https://api.github.com/users/mischah/followers","following_url":"https://api.github.com/users/mischah/following{/other_user}","gists_url":"https://api.github.com/users/mischah/gists{/gist_id}","starred_url":"https://api.github.com/users/mischah/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mischah/subscriptions","organizations_url":"https://api.github.com/users/mischah/orgs","repos_url":"https://api.github.com/users/mischah/repos","events_url":"https://api.github.com/users/mischah/events{/privacy}","received_events_url":"https://api.github.com/users/mischah/received_events","type":"User","site_admin":false},"created_at":"2018-07-05T08:59:43Z","updated_at":"2018-07-05T08:59:43Z","author_association":"NONE","body":"Whoa. That’s a hell of a breaking change. I don’t get why they choose to default it to be that aggressive in removing whitespace. The default should be the other way round.\r\n\r\nAnyways. Here is the how to fix that …\r\n\r\n## Solution\r\n\r\nAccording to [stackoverflow](https://stackoverflow.com/a/46619232/702783).\r\n\r\n### For JIT Compiling\r\n\r\nAdd `{ preserveWhitespaces: false }` as an option to the `bootstrapModule()` method in **main.ts**:\r\n\r\n```javascript\r\nplatformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });\r\n```\r\n\r\n### For AOT Compiling\r\n\r\nAdd `\"angularCompilerOptions\": { \"preserveWhitespaces\": false }` to **tsconfig.app.json**:\r\n\r\n```json\r\n{\r\n  \"extends\": \"../tsconfig.json\",\r\n  \"compilerOptions\": {\r\n    \"outDir\": \"../out-tsc/app\",\r\n    \"module\": \"es2015\",\r\n    \"types\": []\r\n  },\r\n  \"exclude\": [\r\n    \"src/test.ts\",\r\n    \"**/*.spec.ts\"\r\n  ],\r\n  \"angularCompilerOptions\": {\r\n    \"preserveWhitespaces\": false\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"mischah"}}