# Can't use components

**URL:** <https://forum.ionicframework.com/t/cant-use-components/175113>\
**Category:** Ionic Framework\
**Created:** [October 9, 2019, 8:12am UTC](https://forum.ionicframework.com/t/cant-use-components/175113 "2019-10-09T08:12:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tux](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tux/32/94766_2.png) [@tux](https://forum.ionicframework.com/u/tux)\
**Post date:** [October 9, 2019, 8:12am UTC](https://forum.ionicframework.com/t/cant-use-components/175113/1 "2019-10-09T08:12:11Z")

</div>

Hello! I have created a component, but can’t use it. If i add the component in the AppModule `declarations`, `entryComponents` and `exports` i receive an error: `Template parse errors: Can't bind to 'composition' since it isn't a known property of 'app-composition-item'.`. Then i tried to import the AppModule in the pages module and receive: `Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.`. But if i add it to page module _declarations_ it works, but i can declarate component only once, so i can’t use it in another pages.  
Here the how i tried to use it.  
In the page i want to use component:

```
<div *ngFor="let favorite of favorites">
    <app-composition-item [composition]="favorite.composition"></app-composition-item>
</div>

```

Here the component:

```
@Component({
  selector: 'app-composition-item',
  templateUrl: './composition-item.component.html',
  styleUrls: ['./composition-item.component.scss'],
})
export class CompositionItemComponent {

  @Input() public composition: IComposition;

  constructor() {
  }
}
```

---

<div class="post-metadata">

**Author:** ![Calll](https://avatars.discourse-cdn.com/v4/letter/c/c67d28/32.png) [@Calll](https://forum.ionicframework.com/u/Calll)\
**Post date:** [October 9, 2019, 9:50am UTC](https://forum.ionicframework.com/t/cant-use-components/175113/2 "2019-10-09T09:50:41Z")

</div>

> [@tux](#):
>
> Can’t bind to ‘composition’ since it isn’t a known property of ‘app-composition-item’

Hey Tux,

`[composition]="favorite.composition"` has nothing to “bind” to as, it has no reference in the Typescript file. Its looking for a value for ` favourite.composition` in the TS file, but there isn’t anything there.

Do you have the value somewhere else?

---

<div class="post-metadata">

**Author:** ![IreneC](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@IreneC](https://forum.ionicframework.com/u/IreneC)\
**Post date:** [October 9, 2019, 10:05am UTC](https://forum.ionicframework.com/t/cant-use-components/175113/3 "2019-10-09T10:05:34Z")

</div>

Hi!

Have you import ok components?

Create a class like AppModule for components inside your components folder. In this file, in declarations and exports you must add your new component.  
Then in imports in AppModule and the page where you want yo use your component add your new class (the class that is like AppModule).

---

<div class="post-metadata">

**Author:** ![tux](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tux/32/94766_2.png) [@tux](https://forum.ionicframework.com/u/tux)\
**Post date:** [October 9, 2019, 2:41pm UTC](https://forum.ionicframework.com/t/cant-use-components/175113/4 "2019-10-09T14:41:26Z")

</div>

Hello! The value is binded to the component using `@Input` statement. There is no problem if i import a component inside page module (not in AppModule)

---

<div class="post-metadata">

**Author:** ![IreneC](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@IreneC](https://forum.ionicframework.com/u/IreneC)\
**Post date:** [October 9, 2019, 2:59pm UTC](https://forum.ionicframework.com/t/cant-use-components/175113/5 "2019-10-09T14:59:33Z")

</div>

Hi tux,

Maybe you need more quotation marks like this [composition]="‘favorite.composition’"

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [October 9, 2019, 6:57pm UTC](https://forum.ionicframework.com/t/cant-use-components/175113/6 "2019-10-09T18:57:18Z")

</div>

I find Angular’s lazy loading a galactic PITA, so I generally avoid it. One option you have is to follow that path and just throw everything in the app module and never worry about any of this irritating trivia again.

However, to get this working with lazily loaded pages, you need to go all in on it. Declare a separate module for `CompositionItemComponent` (and any friends it always needs). Here’s an example that works for me:

```auto

@Component({
    selector: "compo",
    template: "<div>hello {{world}}</div>",
})
export class CompoComponent {
    @Input() world: string;
}

```

```auto
@NgModule({
    declarations: [CompoComponent],
    exports: [CompoComponent],
})
export class CompoComponentModule {}

```

Add `CompoComponentModule` to the `imports` stanza of the module of whatever page is trying to incorporate this component: in this example, that’s `HomeModule` of a `blank` ionic scratch project, and add to `home.page.ts`: `<compo world="mars">` and you should see no errors and “hello mars” in the rendered page.

---

<div class="post-metadata">

**Author:** ![tux](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tux/32/94766_2.png) [@tux](https://forum.ionicframework.com/u/tux)\
**Post date:** [October 10, 2019, 6:22am UTC](https://forum.ionicframework.com/t/cant-use-components/175113/7 "2019-10-10T06:22:02Z")

</div>

Thanks for the answers. Problem solved using separate module.