angular - Utilizați componenta din modulul importat

Vreau să folosesc product-carousel.module.ts în componenta home. Modulul meu product-carousel arată astfel

const COMPONENTS = [
  ProductBlockComponent,
  ProductCarouselComponent,
  ProductCarouselContainerComponent
];

@NgModule({
imports: [
  CommonModule,
  RouterModule
],
declarations: COMPONENTS,
providers: [],
exports: COMPONENTS
})
export class ProductCarouselContainerModule {}

Apoi îl înregistrez în home.module.ts

@NgModule({
imports: [
  ProductCarouselContainerModule,
  CommonModule,
  FormsModule,
  ProductCarouselContainerModule,
  ComponentsModule,
  ]),
 ],
 declarations: [
  HomeContainer
 ],
 providers: [
   ProductApiService
 ]
})
export class HomeModule {} 

Vreau să folosesc ProductCarouselContainerComponent. Are selectorul 'offer-carousel'. În componenta home îl folosesc astfel

<div class="container-fluid currently-funding">
   <product-carousel></product-carousel>
</div>

Și ca rezultat am

Eroare: Erori la analiza șablonului: 'Product-carousel' nu este un element cunoscut: 1. Dacă 'offer-carousel' este un component Angular, atunci verificați dacă face parte din acest modul. 2. Dacă 'Product-carousel' este un Web Component, atunci adăugați 'CUSTOM_ELEMENTS_SCHEMA'

Ce am ratat?

Răspuns #1

Eroarea este de fapt afișată în captura ta de ecran. Problema este că HomeComponent este declarat în ComponentsModule și nu în HomeModule.

Schimbarea acestui lucru în ComponentsModule va face să funcționeze (bine, există o eroare de pipe asincron, dar asta este altceva, evident) :

app/home/components/index.ts :

import { OfferCarouselModule } from './../../offer/offer-carousel.module';

@NgModule({
  imports: [
    CarouselModule.forRoot(),
    CommonModule,
    ReactiveFormsModule,
    RouterModule,
    SlickModule,
    OfferCarouselModule
  ],
  declarations: COMPONENTS,
  exports: COMPONENTS,
})
export class ComponentsModule { }