How correctly declare component on NgModule for it could be visible in Routing module?

Question

I try to structure my project, and I separate main bar of my application from app.module (here it is):

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

In module home.module.ts , I try to incapsulate all logic, connected with app routing

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

And in this module I use home-routing.module.ts, with three pages:

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 problem is that I can't use any components in this pages, declared in my home.module.ts, even if I declare components in app.module, or in home-routing.module.ts angular anyway tells me that If 'app-product-card' is an Angular component, then verify that it is part of this module. for example I try use in one of the pages ProductsComponent:

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

and I get errors, and if I use this component in home page of this module it works:

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

How can I deal with it, and why angular can't use declared components in this pages? before refactoring all wored ok, but when I had separated my logic to different module it happened.

Here is git repo of my project https://github.com/Yakhnitsa/angular-tutorial_vilka_webstore.git

score 0 · Answer 1 · answered Nov 03 '20 at 07:33

My mistake wasn't in ProductCardComponent, It was in pages components in my HomeRoutingModule, all pages must be declared with required components in the same module (They works, if you just place them in routing module, but without any others components inside), or if you want to declare all common components separately from pages components, you can declare them in individual module, like I did:

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

and then import this module in module, where you declare components, used as pages in Routing module

P.S. Angular is my pain in the neck, in vue.js I have never got such troubles, but I had spent by far less time learning Vue

How correctly declare component on NgModule for it could be visible in Routing module?

1 Answers1