Angular 9 Support with Ivy

[John]

Hello,

     Does Kendo UI for Angular support Angular 9 with Ivy yet?  If not, when will it happen?

Thank you.

[Dimiter Topalov]

Hi,

We are currently working toward providing support for Ivy, and some of our packages are already compatible, but we will likely abstain from introducing the necessary breaking changes involved until there is no official, finalized and stable Angular version that uses Ivy as its default rendering engine. It currently is still in an experimental stage not recommended for production.

This was expected for Angular 8, but is now postponed for the next major Angular version - 9 that was supposed to be released in November, but was not, and latest news are it will be released next year.

We will do our best to provide full support for Ivy as soon as it is officially released as the default Angular rendering engine or very soon after.

You can track the following thread in our GitHub portal where we will be posting any available updates on our progress:

https://github.com/telerik/kendo-angular/issues/2321

Regards,
Dimiter Topalov
Progress Telerik

[John]

OK.  Thank you Dimiter.  I was under the impression that version 9 was released, at least it was for @angular/cli.  

[Jean-Christian]

Does Kendo UI for Angular support Angular 9 now that it it released.

After upgrading to Angular 9 I got some messages like

 @progress/kendo-angular-common@1.2.1 requires a peer of @angular/common@6 - 8 but none is installed. You must install peer dependencies yourself.

Regards,

[Dimiter Topalov]

Hi Jean-Christian,

The latest versions of the Kendo UI for Angular packages support Angular 9. All packages dependencies were updated to require @progress/kendo-angular-common v. 1.2.2 which in turn supports Angular 9.

Please make sure that all latest versions of our packages are installed:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

We also recommend removing the package-lock.json file and the node_modules folder before running a clean npm install to ensure that all latest versions and their correct dependencies are actually installed.

Let us know whether updating all packages resolves the issue.

Regards,
Dimiter Topalov
Progress Telerik

[Jean-Christian]

Ok, 

Today the npm update installed the les versions.

Regards,

[Thibaut]

Hi, 

 

Are the grid component and all its directives compatible with Angular 9 and Ivy ? I just updated my project to Angular 9 and all kendo components to their latest version. However the kendoGridCellTemplate doesn't seem to provide a value for "let-dataItem". Whenever I call a method with a reference to dataItem, the value of dataItem is undefined...

However when I set "enableIvy": false in my tsconfig.app.json, the dataItem value is evaluated correctly...

Regards, 

Thibaut

[Thibaut]

Hi, 

Are the grid component and all its directives compatible with Angular 9 and Ivy ? I just updated my project to Angular 9 and all kendo components to their latest version. However the kendoGridCellTemplate doesn't seem to provide a value for "let-dataItem". Whenever I call a method with a reference to dataItem, the value of dataItem is undefined...
However when I set "enableIvy": false in my tsconfig.app.json, the dataItem value is evaluated correctly...
Regards, 
Thibaut

[Dimiter Topalov]

Hello Thibaut,

The Grid and all of its functionalities are compatible and working as expected in Angular 9. There were issues with the early 9.x versions of the Angular framework, but they were also fixed, and we are not aware of any problems, affecting our components since Angular 9.0.4.

I can suggest ensuring that all latest versions of our packages and their correct dependencies are actually installed by removing the node_modules folder and the package-lock.json file and running a clean npm install. Sometimes clearing the NPM cache also proves useful:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

https://docs.npmjs.com/cli-commands/cache.html

I prepared a sample project using Angular 9.1 and Kendo Grid v. 4.7.0 (find attached) that is working as expected.

Please compare it to your implementation and setup, and apply any necessary adjustments. Checking the browser developer tools (F12) console for any JavaScript errors might also indicate what is causing the problem.

If the issue persists, please send us a similar isolated runnable project where it can be observed or modify the attached one to better replicate the specific scenario until the problem is reproducible. This will help us inspect the problem further, determine what is causing it, and try to provide a solution that is best suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Thibaut]

Hello Dimiter, 

Thank you for taking the time. Your sample project helped me to figure out what was wrong. 

I adapted your sample to reproduce my issue and how to fix it. I think it can be interesting. 

In my archive, in the tsconfig.app.json, the "enableIvy" flag is set to false. If you start the app, you can see the grid is displayed correctly. What I mean by correctly is that only two columns are displayed and they each display the 'text' property of the object. Also, in debug mode, the formatColumn method is called. 

Now, if you set the "enableIvy" flag to true, the grid is not displayed correctly : All three columns are displayed (while only two are declared in tableInputColumnMetadata and the formatColumn method is NOT called.

Now if you keep the "enableIvy" flag to true and simply replace "<div *ngFor..." by "<ng-container *ngFor..." in app.component.ts, you'll see that the grid is now correctly displayed with 2 columns and formatColumn method called even though Ivy is enabled.

Do you know why the <div *ngFor is not working anymore while Ivy is enabled ?

I'm aware <ng-container should be used when declaring a *ngFor loop but it was hard to debug considering it was working before Ivy. 

Regards, 

Thibaut

 

 

 

[Dimiter Topalov]

Hi Thibaut,

The difference between Ivy and the previous Angular rendering engine versions is that ContentChildren used to match any nested DOM elements, but now only direct children are matched:

https://angular.io/guide/ivy-compatibility#changes-you-may-see

https://angular.io/guide/ivy-compatibility-examples#content-children-descendants

Thus when the GridColumnComponents are wrapped in an extra DIV element, they are not picked up at all (it is working with ng-container because it does not add an extra DOM element to wrap the content). The Grid thus considers there is no column configuration, and reverts to rendering a column for each data item property:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/#toc-default-configuration

Please note that using an extra container to put the *ngFor directive on is not necessary - it can be placed directly on the kendo-grid-column element:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/#toc-specific-column-generation

If wrapping the kendo-grid-column tag in another element so that a couple of structural directives could be used - for example *ngFor on the wrapper, and *ngIf on the kendo-grid-column element, then use ng-container instead of DIV to avoid adding extra DOM element between the Grid column component and the Grid component.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Kalin]

Hello,

I am getting an error regarding Ivy Support after installing @progress/kendo-angular-menu, if I am already serving the app. To fix it I need to restart the ng serve process.

Steps to reproduce:

1. ng new kma-reproducer --defaults=true

2. cd kma-reproducer

3. ng serve

4. Now run ng add @progress/kendo-angular-menu while the app is being served

I am attaching the whole output of the ng serve command.

I know this isn't something major, just want to document it for posterity.

 

[Svet]

Hi Kalin,

Thank you for the provided sample project and list of steps.

Indeed, what you describe is expected. Any ng add command should be executed when the Angular application isn't being served. The ng add command installs new packages to the project and in order for the Angular application to be able to use these new packages it should be recompiled. It isn't possible to install new project dependencies at run time and use them without recompiling the application. Indeed, that is related to the functionality of the framework as opposed to being a Kendo UI for Angular related feature or functionality.

Regards,
Svetlin
Progress Telerik