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