3

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?

Andry
  • 45
  • 5
  • Its confusing. home.module.ts is component. Right? If yes please name it as home.component.ts. For better understanding. – Tavish Aggarwal Sep 26 '17 at 13:20
  • @TavishAggarwal home.module.ts - it's a module, which contains some components. And I want to use one from it. It's named OfferCarouselContainerComponent and has selector "offer-carousel" – Andry Sep 26 '17 at 13:26
  • okay! Looks ok to me.. let me see if I can help you out – Tavish Aggarwal Sep 26 '17 at 13:44
  • @TavishAggarwal it will be cool. Thank you, buddy – Andry Sep 26 '17 at 13:53
  • Be careful to not import twice your `OfferCarouselContainerModule` in your `HomeModule`, but appart from that it looks Ok. In your 3 components, make sure that one has the correct `offer-carousel` selector. It should work. Sending us a GitHub link would be better in that case because a lof of things could cause this issue which is hard to pinpoint – Alex Beugnet Sep 26 '17 at 14:44
  • @AlexBeugnet give me 1 second – Andry Sep 26 '17 at 14:54
  • @AlexBeugnet link to repo https://github.com/ibogdan94/angular4 What to use offer/offer-carousel.module/ts inside home component. home.component.html, line 14 give me an error () – Andry Sep 26 '17 at 15:01
  • You are missing the `"@ngrx/effects": "^4.0.4",` library in your `package.json` by the way :-) – Alex Beugnet Sep 26 '17 at 15:33
  • @AlexBeugnet looks like I installed it, but forget to use --save flag. Thank you. Do you see any errors? – Andry Sep 26 '17 at 15:35
  • Yes, but it is caused because of your `package.json` file... I'm getting the error : `Cannot assign to read only property 'microTask' of object '[object Object]'` most probably caused by `ngrx-store-freeze`. What is your current version of this library ? Consider freezing the versions of the packages you are using for the github. – Alex Beugnet Sep 26 '17 at 15:38
  • Must be because a new release was there 2 days ago with breaking changes I suppose : https://github.com/brandonroberts/ngrx-store-freeze/releases – Alex Beugnet Sep 26 '17 at 15:39
  • @AlexBeugnet from package "name": "ngrx-store-freeze", "optionalDependencies": {}, "peerDependencies": { "@ngrx/store": "^2.2.1" }, "readme": "ERROR: No README data found!", "repository": { "type": "git", "url": "git+https://github.com/codewareio/ngrx-store-freeze.git" }, "scripts": { "build": "rm -rf dist && tsc", "lint": "tslint 'src/**/*.ts'", "prepublish": "npm run build && npm run lint" }, "typings": "./dist/index.d.ts", "version": "0.1.9" – Andry Sep 26 '17 at 15:40
  • @AlexBeugnet I have the same message. And error message I found here: https://www.dropbox.com/s/k9kyrvhx3dzew1r/Selection_040.jpg?dl=0 – Andry Sep 26 '17 at 15:42
  • Yes, there is an incompatibility between `@ngrx` and `ngrx-store-freeze`. You just updated your packages I guess to have it :-). There is an open issue right there : https://github.com/brandonroberts/ngrx-store-freeze/issues/17. Kinda hard to spot the actual bug with these stores messing with us :-D – Alex Beugnet Sep 26 '17 at 15:44
  • Alright, to set this `ngrx-store-freeze` issue aside, you can change this in the file `src/app/reducers/index.ts` : `? [logger, storeFreeze]` to `? [logger]` at line 63 – Alex Beugnet Sep 26 '17 at 15:46
  • @AlexBeugnet I remove it from app/reducers/index.ts but still has issue about 'offer-carousel' is not a known element – Andry Sep 26 '17 at 15:48
  • @AlexBeugnet Now I have the same error, but more beautiful https://www.dropbox.com/s/qkamvds3vp24yss/Selection_041.jpg?dl=0 – Andry Sep 26 '17 at 15:51
  • yes, the main issue is not corrected, I get the correct error message now – Alex Beugnet Sep 26 '17 at 15:53
  • Did you solve the issue or i can write the answer? – yurzui Sep 26 '17 at 16:08
  • I'm writing it atm – Alex Beugnet Sep 26 '17 at 16:11

1 Answers1

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 { }
Alex Beugnet
  • 4,003
  • 4
  • 23
  • 40