Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

[nadeemse]

Unhandled Promise rejection: Template parse errors: Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

1. If 'owl-carousel' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

       <owl-carousel
           [ERROR ->][options]="{items: 3, dots: false, navigation: false}"
           [items]="items"
         "): MostViewedComponent@11:16

   Can't bind to 'items' since it isn't a known property of 'owl-carousel'.

3. If 'owl-carousel' is an Angular component and it has 'items' input, then verify that it is part of this module.
4. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("owl-carousel [options]="{items: 3, dots: false, navigation: false}" [ERROR ->][items]="items" [carouselClasses]="['owl-theme', 'row', 'sliding']"> "): MostViewedComponent@12:16 Can't bind to 'carouselClasses' since it isn't a known property of 'owl-carousel'.
5. If 'owl-carousel' is an Angular component and it has 'carouselClasses' input, then verify that it is part of this module.
6. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("tions]="{items: 3, dots: false, navigation: false}" [items]="items" [ERROR ->][carouselClasses]="['owl-theme', 'row', 'sliding']"> <div class="item" *ngFor="let it"): MostViewedComponent@13:16 'owl-carousel' is not a known element:
7. If 'owl-carousel' is an Angular component, then verify that it is part of this module.

8. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

   [ERROR ->] ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'owl-carous……} Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'owl-carousel'.
9. If 'owl-carousel' is an Angular component and it has 'options' input, then verify that it is part of this module.

10. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

        <owl-carousel
            [ERROR ->][options]="{items: 3, dots: false, navigation: false}"
            [items]="items"
          "): MostViewedComponent@11:16

    Can't bind to 'items' since it isn't a known property of 'owl-carousel'.

11. If 'owl-carousel' is an Angular component and it has 'items' input, then verify that it is part of this module.
12. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("owl-carousel [options]="{items: 3, dots: false, navigation: false}" [ERROR ->][items]="items" [carouselClasses]="['owl-theme', 'row', 'sliding']"> "): MostViewedComponent@12:16 Can't bind to 'carouselClasses' since it isn't a known property of 'owl-carousel'.
13. If 'owl-carousel' is an Angular component and it has 'carouselClasses' input, then verify that it is part of this module.
14. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("tions]="{items: 3, dots: false, navigation: false}" [items]="items" [ERROR ->][carouselClasses]="['owl-theme', 'row', 'sliding']"> <div class="item" *ngFor="let it"): MostViewedComponent@13:16 'owl-carousel' is not a known element:
15. If 'owl-carousel' is an Angular component, then verify that it is part of this module.

16. If 'owl-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

    [ERROR ->]

[lukemcd]

I have run into this issue as well when trying to use this library.

It would be great if a simple working example were included.

[sergey-morenets]

Hi @nadeemse @lukemcd

Which version of this library are you using? Here are my steps to install:

npm install script-loader --save npm install angular-owl-carousel --save-dev

After that it worked properly:

<owl-carousel
      [options]="galleryCarouselOptions"
      [items]="images">
      <div class="item" *ngFor="let image of images">
        <img [src]="image" />
      </div>
    </owl-carousel>

[CarlosAyala]

Hi!. I have the same problem

Can't bind to 'options' since it isn't a known property of 'owl-carousel'.

[mujtaba01]

Hi @CarlosAyala @lukemcd @nadeemse

I believe if you would have followed the instructions given in the README of this repo exactly. You should not face this issue.

[CarlosAyala]

Hi @mujtaba01 . I have tried some solutions, and now I have another error that I can't fix. ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name. Error: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.

This error is thrown when i add the <owl-carousel tag.

[CarlosAyala]

Sorry @mujtaba01 . I tried to do this wrapper work, I have managed to eliminate the errors, but now the images of the slide appear all in vertical without the carousel functionality. Css problem maybe?

I gonna try another wrapper or carousel plugin for angular.

Thank you.