Angular 如何正确声明NgModule上的组件，因为它在路由模块中是可见的？

我尝试构建我的项目，并将我的应用程序的主栏与app.module分开（在这里）：

在module home.module.ts中，我尝试整合所有与应用程序路由相关的逻辑

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { ProductCardComponent} from './components/product-card/product-card.component';


@NgModule({
  declarations: [HomeComponent, ],
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  exports: [ HomeComponent ]
})
export class HomeModule { }

在本模块中，我使用home-routing.module.ts，共有三页：

import { NgModule } from '@angular/core';
import {ProductsComponent, ShoppingCartComponent, UserProfileComponent} from './pages';
import {Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '', component: ProductsComponent,
  },
  {
    path: 'shopping-cart', component: ShoppingCartComponent,
  },
  {
    path: 'user-profile', component: UserProfileComponent,
  },

];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

我的问题是，我不能使用此页面中的任何组件，在My home.module.ts中声明，即使我在app.module或home-routing.module.ts中声明组件，angular告诉我

如果“app product card”是一个角度组件，那么请验证它是此模块的一部分。

例如，我尝试在其中一个页面ProductsComponent中使用：

<p>Products component works</p>
<app-product-card></app-product-card>

产品组件工作正常

我的错误不在
ProductCardComponent
中，而是在我的
HomeRoutingModule
中的页面组件中，所有页面都必须声明在同一模块中包含必需的组件（如果您只将它们放在路由模块中，但没有任何其他组件，它们就可以工作），或者，如果您想单独声明所有公共组件和页面组件，您可以在单个模块中声明它们，就像我所做的那样：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductCardComponent} from './product-card/product-card.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ProductCardComponent
  ],
  exports: [
    ProductCardComponent
  ]
})
export class ComponentsModule { }

然后在模块中导入此模块，在模块中声明组件，用作
路由模块中的页面

p.S.Angular是我最头疼的问题，在vue.js中我从来没有遇到过这样的麻烦，但我花在学习vue上的时间要少得多

<router-outlet></router-outlet>
<app-product-card></app-product-card>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductCardComponent} from './product-card/product-card.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ProductCardComponent
  ],
  exports: [
    ProductCardComponent
  ]
})
export class ComponentsModule { }