Kendo UI creates a double input when added to Angu

Question

I'm working on ASP.NET MVC app. I have recently added Angular 4 to it and now I'm trying to use some Kendo UI controls. I've added it in the same way as suggested at https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/

However instead of having a single input field like here, I'm getting a double input. I've checked the source code and it generated the following html. Any idea why it doesn't work as supposed to?

In my html I put just that:

<kendo-numerictextbox>
    [value]="value" [min]="0" [max]="100" [autoCorrect]="autoCorrect">
</kendo-numerictextbox>

Generated html:

<kendo-numerictextbox class="ng-tns-c0-0 k-widget k-numerictextbox" ng-reflect-auto-correct="false" ng-reflect-max="100" ng-reflect-min="0" ng-reflect-value="5" dir="ltr">
    <span class="k-widget k-numerictextbox" style="">
        <span class="k-numeric-wrap k-state-default">
            <input type="text" class="k-formatted-value k-input" tabindex="0" title="" aria-disabled="false" aria-readonly="false" style="display: inline-block;">
            <input data-role="numerictextbox" role="spinbutton" class="k-input" type="text" aria-valuenow="" aria-disabled="false" aria-readonly="false" style="display: none;">
                <span class="k-select">
                    <span unselectable="on" class="k-link" style="touch-action: pan-y;">
                        <span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value">Increase value</span>
                    </span>
                    <span unselectable="on" class="k-link" style="touch-action: pan-y;"><span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value">Decrease value</span>
                </span>
            </span>
        </span>
    </span>
    <!--bindings={
  "ng-reflect-decrement": "Decrease value",
  "ng-reflect-increment": "Increase value"
    }-->
    <span class="k-numeric-wrap">
        <input autocomplete="off" autocorrect="off" class="k-input k-formatted-value" role="spinbutton" ng-reflect-events="[object Object]" id="f663efa5-b8d0-a63d-ffaf-4bd8ca1bbfb9" aria-valuemin="0" aria-valuemax="100" title="" tabindex="0">
        <!--bindings={
"ng-reflect-ng-if": "true"
}--><span class="k-select" ng-reflect-events="[object Object]">
            <span class="k-link k-link-increase" aria-label="Increase value" title="Increase value">
                <span class="k-icon k-i-arrow-n"></span>
            </span>
            <span class="k-link k-link-decrease" aria-label="Decrease value" title="Decrease value">
                <span class="k-icon k-i-arrow-s"></span>
            </span>
        </span>
    </span>
  </kendo-numerictextbox>

Answer 1

I managed to fix it by updating all my kendo, etc. CDNs to the latest version. It might be actually jQuery that was causing this issue. Perhaps it is not compatible with Angular 4