Было предложено два решения, решающих эту проблему (спасибо участникам). Проблема root заключалась в том, что у меня были теги <html> и <body> в app.component. html. В Angular это запрещено. body{margin:0} был применен к <body> компонента, но в индексе html был более высокий уровень <body>, который добавлял нежелательные поля. Удаление <html> и <body> из app.component. html и перемещение стилей в стилях. css Устранена проблема.
Было предложено другое решение для установки body{position: absolute; top: 0; left: 0} в app.component. css. Это действительно сработало, но замаскировало реальный источник проблемы, которым были неуместные теги <body> и <html>.
Последнее замечание: Angular похоже, не выполняет более одного компонента в индексе. html. Несмотря на то, что у меня был компонент в <header>, <main> и <footer>, визуализировался только компонент в <main>. Как бы то ни было, вот как выглядит мое окончательное решение:
стилей. css
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
}
index. html
<!DOCTYPE html>
<html>
<body>
<app-root></app-root>
</body>
</html>
app. компонент. html
<header>
<app-main-menu></app-main-menu>
</header>
<main>
<app-landing-page></app-landing-page>
</main>
<footer>
<app-footer></app-footer>
</footer>