Search code examples
angularkendo-ui-angular2

Kendo UI + Angular 2 - Issue including in project


Just trying to include the simplest of Kendo UI components into my Angular 2 app (using Webpack) and am getting the issue of Can't bind to 'primary' since it isn't a known property of 'button'.

I'm importing it in the AppModule as so

import { ButtonsModule } from '@progress/kendo-angular-buttons';

and then

imports: [
    BrowserModule,
    routing,
    FormsModule,
    HttpModule,
    ButtonsModule,
    SharedModule.forRoot(),
    ...

Even registering with Webpack in a sort of vendor.ts file won't change a thing. The files/module itself is loading into the application, so I know the directive is at least declared. I see the plunkr they give on their site works just fine, and I've included all of button's dependencies.

Any ideas? Angular v 2.4.8 and the version of the button directive I'm using is 0.20.1


Solution

  • Fixed by importing the ButtonsModule module into a CommonModule, so that it's shared to other modules. The component I was trying to use the Kendo Button in was a lazy-loaded module, and therefore had it's own module that only imported the Shared/common module for the app.

    Adding the ButtonsModule import on SharedModule as well as exporting it fixed my issue, as it was then shared everywhere.