Если вы загружаете компонент, как показано ниже
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
, тогда каждый компонент будет загружаться с верхним и нижним колонтитулом, включая вашу домашнюю страницу.Чтобы преодолеть эту проблему, у вас есть два решения.
1) Поместите условие "* ngIf " в тег заголовка и нижнего колонтитула и проверьте, не является ли ссылка на роутер / компонент не домашней.
2) отдельный домашний модуль и ленивая загрузка другого компонента.Используя этот способ, вы можете отделить HTML для домашнего компонента и другого компонента.
Кроме того, для маршрутизации используйте ниже фрагмент.
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'search', component: SearchComponent }
];
Это перенаправит вас на домашнюю страницу в случаеесли какой-либо маршрут не совпадает или если он пуст.