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

Question

我尝试构建我的项目，并将应用程序的主栏与app.module分开(如下所示)：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent, FooterComponent, SidebarComponent} from './modules';
import { HomeModule } from './modules/home/home.module';
import { ProductCardComponent } from './modules/home/components';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
  ],
  imports: [
    BrowserModule,
    HomeModule //here is this module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模块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 { }

我的问题是，我不能在这个页面中使用任何在我的home.module.ts中声明的组件，即使我在app.module或home-routing.module.ts angular中声明了组件，但angular告诉我If 'app-product-card' is an Angular component, then verify that it is part of this module.例如我尝试在其中一个页面中使用ProductsComponent：

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

我得到了错误，如果我在这个模块的主页中使用这个组件，它就会起作用：

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

我如何处理它，为什么angular不能在这个页面中使用声明的组件？在重构之前一切正常，但是当我将我的逻辑分离到不同的模块时，就发生了这种情况。

这是我的https://github.com/Yakhnitsa/angular-tutorial_vilka_webstore.git项目的git存储库

Answer 1

我的错误不是在ProductCardComponent中，而是在我的HomeRoutingModule中的pages组件中，所有的页面都必须在同一个模块中声明所需的组件(如果你只是将它们放在routing模块中，但没有任何其他组件，它们就可以工作)，或者如果你想从页面组件中单独声明所有公共组件，你可以像我一样在单独的模块中声明它们：

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 { }

然后将此模块导入到模块中，在模块中声明组件，用作Routing module中的页面

另外，Angular是我的痛处，在vue.js我从来没有遇到过这样的麻烦，但我花在学习Vue上的时间要少得多