Use component from imported module

Question

I want to use product-carousel.module.ts in home component. My product-carousel module looks like

const COMPONENTS = [
  ProductBlockComponent,
  ProductCarouselComponent,
  ProductCarouselContainerComponent
];

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

Than I register it in home.module.ts

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

I want to use ProductCarouselContainerComponent. It has selector 'offer-carousel'. In home component I using it like this

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

And as result I have

Error: Template parse errors: 'Product-carousel' is not a known element: 1. If 'offer-carousel' is an Angular component, then verify that it is part of this module. 2. If 'Product-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA

What I missed?

Answer 1

The error is actually displayed in your screenshot. The issue is that the HomeComponent is declared in the ComponentsModule and not in the HomeModule .

Changing this in your ComponentsModule will make it work (well there is an async pipe error but that's something else obviously) :

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