Проблемы с интервалом CSS в Angular 6

Question

Мы только что обновились до Angular 6 с Angular 5 и заметили, что между кнопками / значками и т. Д. Нет промежутков между ними.

Мы хотели бы восстановить пробелы между кнопками и т. Д. Мне удалось воспроизвести вопросы ниже. Как вы можете видеть в примере с Angular 5, между кнопками внутри и снаружи углового приложения есть пробелы.

Но

В Angular 6 удалено расстояние между кнопками внутри углового приложения.

Есть идеи?

Пример Angular 5 (я хочу такое поведение)

https://stackblitz.com/edit/angular-5-example-kyu8ud?file=index.html

Пример Angular 6 (с проблемами, описанными выше)

https://stackblitz.com/edit/angular-vyfwih?file=src%2Fapp%2Fapp.component.html

Answer 1

Наконец-то это сработало (объединяя ответы в этом посте) и вернул мой пробел, добавив):

,
"angularCompilerOptions": {
  "preserveWhitespaces": true
}

до tsconfig.app.json

и действительно также добавьте его в main.ts , добавив его в platformBrowserDynamic следующим образом:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true})

После этого: ng serve снова для загрузки новых изменений

Answer 2

Начиная с Angular 6, опция компилятора preserveWhitespaces установлена ​​на false. Вот почему вы наблюдаете это поведение. Вы можете изменить это в вашем tsconfig файле:

"angularCompilerOptions": {
  "preserveWhitespaces": true
} 

По сути, это разница между:

<button>Test1</button> <-- whitespace here
<button>Test2</button>

и

<button>Test1</button><button>Test2</button> <-- no whitespace

Здесь - ваш пример Angular 5 без пробелов, вы увидите, что он теперь такой же, как версия Angular 6.

Answer 3

пожалуйста, используйте это ваш файл

platformBrowserDynamic () .bootstrapModule (AppModule, {preserveWhitespaces: true})

Answer 4

Это потому что у вас начальная загрузка в Angular 5 Example. Пожалуйста, посмотрите на скриншот ваших зависимостей. Бутстрап есть:).

Снимок экрана со списком зависимостей

Вам просто нужно подумать, когда вы добавили загрузчик в качестве зависимости.