مشکل در مسیردهی کامپوننت های انگولار

دوستان لطفا یه همتی کنید وقتی می بینیم اکثر سوالات جواب گرفتن ولی من موندم جیگرم خون میشه
یه مقدار اطلاعات بیشتر میزارم شاید کمک کنه ، فقط این نکته رو هم بگم در زمان ساخت پروژه انگولاریم سیستم روتینگ توسط cli انگولار ایجاد شده

app.component.html

<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

app-routing-module.html

const routes: Routes = [
  {path: 'Home' , component: HomeComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'lists', component: ListsComponent },
  {path: 'pages', component: PageseComponent },
  {path: 'blog', component: BlogComponent },
  {path: 'contact-us', component: ContactUsComponent }
];

home.component.html

<app-header></app-header>
<app-section-category></app-section-category>
<app-list-pruducts></app-list-pruducts>
<app-slider></app-slider>
<app-box-feature></app-box-feature>
<app-counter></app-counter>
<app-package></app-package>
<app-slider-footer></app-slider-footer>
<app-email></app-email>
<app-feature-footer></app-feature-footer>

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SectionCategoryComponent,
    ListPruductsComponent,
    SliderComponent,
    BoxFeatureComponent,
    CounterComponent,
    AppPackageComponent,
    SliderFooterComponent,
    EditClassDirective,
    EmailComponent,
    FeatureFooterComponent,
    FooterComponent,
    FooterCopyrightComponent,
    HomeComponent,
    HeaderComponent,
    CategoriesComponent,
    ListsComponent,
    PageseComponent,
    BlogComponent,
    ContactUsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})

سلام الان برای مثال شما

<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

چرا این سه رو کنار هم قرار دادید ؟

@hesammousavi

البته navbar ام رو هم فراموش کردم بزارم که آپدیتش می کنم
درجواب شما هم اینکه می خواستم فوتر و منوهام در تمام صفحات ثابت باشن
بقیه هم متغیر
تگ آوت لت هم که معلومه دیگه

<header><app-navbar></app-navbar></header>
<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

ولی فکر کنم با حرف شما فهمیدم که تگ هوم نباید اینجا باشه !! درسته

بله همه رو باید Router هندل کنه حتی صفحه اصلی رو

@hesammousavi

معذرت میخوام ، متوجه منظورتون نشدم میشه به صورت مصداقی بگید که دقیقا باید چیکار کنم
چون من انواع راه ها رو تست کردم تگ app-home که از اینجا بردارم کلا نمایش داده نمیشه

حلش کردم ،
اسم مسیر هوم کومپوننت رو خالی گذاشتم

const routes: Routes = [
  {path: '' , component: HomeComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'lists', component: ListsComponent },
  {path: 'pages', component: PageseComponent },
  {path: 'blog', component: BlogComponent },
  {path: 'contact-us', component: ContactUsComponent }
];

و تگ app-home رو نیز از app.component.html برداشتم

<header><app-navbar></app-navbar></header>
<!-- <app-home></app-home> -->
<router-outlet></router-outlet>
<app-footer></app-footer>

قبلش یه ویدیو هم از یوتیوب نگاه کردم با لینک زیر :
https://www.youtube.com/watch?v=Nehk4tBxD4o