如何在NgModule上正确声明组件，以使其在“路由”模块中可见？

如何解决如何在NgModule上正确声明组件，以使其在“路由”模块中可见？

我尝试构建项目，然后将应用程序的主栏与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,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 { }

我的问题是，即使我在app.module或home-routing.module.ts中声明了组件，我也无法使用此页面中在home.module.ts中声明的任何组件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 repo

解决方法

我的错误不是在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 { }

，然后将此模块导入模块中，在模块中声明组件，这些模块在Routing module

中用作页面

P.S。 Angular是我的脖子痛，在vue.js中我从来没有遇到过这样的麻烦，但是我花更少的时间学习Vue